css如何設定文字超出省略號-css教學-PHP中文網

css如何設定文字超出省略號

醉折花枝作酒筹

發布： 2023-01-05 16:10:00

原創

15907 人瀏覽過

方法：首先使用“overflow:hidden”語句，設定內容超出後隱藏；然後使用“text-overflow:ellipsis”語句，設定內容超出顯示為省略號；最後使用“white-space:nowrap”語句，設定文字不進行換行即可。

css如何設定文字超出省略號

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

新建一個html頁面，在html程式碼頁面找到

標籤，在標籤裡建立一個

標籤，然後輸入顯示的內容並新增一個class類別為class= "cont"。找到

標籤，在這個標籤下方建立一個<style>標籤，在<style>標籤裡設定class為cont的樣式內容超出後為隱藏。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> .cont{ overflow:hidden;/*内容超出后隐藏*/ } </style> </head> <body> <p class="cont"> 订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>儲存好程式碼，使用瀏覽器開啟html檔案查看效果，發現內容並沒有隱藏，原因是沒有設定內容的高度。 </p><p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="css如何設定文字超出省略號"/></p><p>設定內容顯示為一行，內容超出後顯示為省略號。為cont類別新增內容顯示為一行：white-space: nowrap; ，內容超出後顯示為省略號：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同時使用才能顯示為省略號）。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><div class="contentsignin">登入後複製</div></div><p>儲存好程式碼後使用瀏覽器開啟查看內容超出後顯示為省略號的效果。 <p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="css如何設定文字超出省略號"/><p>推薦學習：<a href="https://www.php.cn/course/list/12.html" target="_blank">css影片教學#</style>

以上是css如何設定文字超出省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章！