首頁 > 文章 > web前端 > css ellipsis不起作用怎麼辦

css ellipsis不起作用怎麼辦

藏色散人原創: 2020-11-20 11:41:313958瀏覽

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

css ellipsis不起作用怎麼辦

推薦：《css影片教學》

解決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不起作用怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css描邊屬性是什麼下一篇：css描邊屬性是什麼

看更多