집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 줄임표가 작동하지 않는 경우 수행할 작업

CSS 줄임표가 작동하지 않는 경우 수행할 작업

藏色散人원래의: 2020-11-20 11:41:314014검색

CSS 줄임표가 작동하지 않는 경우: 먼저 CSS를 연 다음 "overflow:hidden;" 및 "white-space:nowrap;width:150px;"와 함께 "text-overflow:ellipsis" 속성을 사용하세요.

권장 사항: "css 비디오 튜토리얼"

Css 속성 text-overflow:ellipsis가 작동하지 않는 문제를 해결하세요(텍스트 오버플로는 생략 부호를 표시합니다)

text-overflow:elipsis를 작동시키세요:

If CSS 속성 text-overflow:elipsis를 사용하려면overflow:hidden;white-space:nowrap;width:150px;

1.text-overflow 구문:

text-overflow : clip | ellipsis

2. -overflow 매개변수 설명:

clip: 생략 기호(...)를 표시하지 않고 간단히 잘라냅니다.

elipsis: 개체의 텍스트가 오버플로될 때 생략 기호(...)를 표시합니다.

3. 사용:

<!doctype html><html>
    <head>
        <meta charset="utf-8">
        <title>测试页面</title>
    </head>

    <style type="text/css">        
        .test{
            text-overflow:ellipsis;
            overflow:hidden;
            white-space:nowrap;
            width:150px;
            }
    </style>
    <body>
        <ul id="textFlow">
            <li class="test"><a href="#">第一标题：奇艺之旅</a></li>
            <li class="test"><a href="#" title="第二标题：萨迪斯的项圈的奇闻异事">第二标题：萨迪斯的项圈的奇闻异事</a></li>
            <li class="test"><a href="#" title="第三标题：杜斯的奇妙之旅。测试数据。测试数据">第三标题：杜斯的奇妙之旅。测试数据。测试数据 </a></li>
        </ul>
    </body></html>

위 내용은 CSS 줄임표가 작동하지 않는 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 스트로크 속성이란 무엇입니까?다음 기사：CSS 스트로크 속성이란 무엇입니까?