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

方法：1、利用「overflow:hidden;」樣式設定a標籤文字超出隱藏；2、利用「display: block;」將a標籤設定為區塊級元素；3、利用「text-overflow :ellipsis;」設定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>

顯示效果如圖：

（學習影片分享：css影片教學）

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