首頁  >  文章  >  web前端  >  css3怎麼設定a標籤超出部分為省略號

css3怎麼設定a標籤超出部分為省略號

WBOY
WBOY原創
2022-03-22 11:26:482754瀏覽

方法:1、利用「overflow:hidden;」樣式設定a標籤文字超出隱藏;2、利用「display: block;」將a標籤設定為區塊級元素;3、利用「text-overflow :ellipsis;」設定a標籤超出部分的樣式為省略號即可。

css3怎麼設定a標籤超出部分為省略號

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3怎麼設定a標籤超出部分為省略號

text-overflow 屬性指定當文字溢出包含它的元素時,應該如何顯示。可以設定溢出後,文字被剪下、顯示省略號 (...) 或顯示自訂字串(不是所有瀏覽器都支援)。

text-overflow: clip|ellipsis|string|initial|inherit;

clip    剪切文字。

ellipsis    顯示省略符號 ... 來代表被修剪的文字。

範例如下:

a標籤文字給予一個固定長度和樣式就可以顯示省略號

css:

 .cont {
            width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            float: left;
        }

html:

<a class="cont">这是一个名称很长的文档吧要测试超出功能</a>

顯示效果如圖:

css3怎麼設定a標籤超出部分為省略號

(學習影片分享:css影片教學

以上是css3怎麼設定a標籤超出部分為省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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