css ellipsis不起作用怎麼辦

css ellipsis不起作用的解決辦法：首先開啟css；然後將屬性「text-overflow:ellipsis」跟「overflow:hidden;」以及「white-space:nowrap;width:150px;」一起使用即可。

推薦：《》

解決Css屬性text-overflow:ellipsis 不起作用(文字溢位顯示省略號)

使text-overflow:elipsis起作用：

想要使用css屬性text-overflow:elipsis起到作用，樣式必須跟overflow:hidden; white-space:nowrap;width:150px;一起使用

1、text-overflow語法：

text-overflow : clip | ellipsis

2、text-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 ellipsis不起作用怎麼辦的詳細內容，更多請關注TW511.COM其它相關文章！