<html> <title>css控制字數</title> <head> <style type="text/css"> .dd { border: solid 1px gray; width: 180px; course: hand; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* for IE */ -o-text-overflow: ellipsis; /* for Opera */ -icab-text-overflow: ellipsis; /* for iCab */ -khtml-text-overflow: ellipsis; /* for Konqueror Safari */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ -webkit-text-overflow: ellipsis; /* for Safari,Swift*/ } </style> </head> <body> <span class="dd" style="display: block"> 信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數 </span> <br> <div class="dd">信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數 </div> </body> </html>
備注：<span>標簽不是塊標簽，如果沒有辦法顯示為預期的樣子，則需要將其改為塊標簽，添加 style="display: block"樣式。
object.style.whiteSpace="nowrap"在我們的 HTML DOM 教程中，您可以找到更多有關 whiteSpace 屬性的細節。
p
{
white-space: normal
}
可能的值
值 描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
名稱：text-overflow
分類：IE專有樣式
簡述：設置是否使用省略號標示文本溢出
概述：text-overflow是設置是否使用省略號標示文本溢出的樣式(Style)。
text-overflow詳細說明語法：
text-overflow : clip | ellipsis
取值：
clip : 默認值。不顯示省略標記(...)，而是簡單的裁切
ellipsis : 當對象內文本溢出時顯示省略標記(...)
overflow 屬性設置當元素的內容溢出其區域時發生的事情。
繼承性：No
說明
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素
框中可以放下所有內容也會出現滾動條。
JavaScript 語法
CSS 屬性也可通過一段 JavaScript 被動態地改變。
腳本語法：
object.style.overflow="hidden"在我們的 HTML DOM 教程中，您可以找到更多有關 overflow 屬性 的細節。
在我們的 HTML DOM 教程中，您也可以找到完整的 Style 對象參考手冊。
例子
p
{
overflow: scroll
}
可能的值
值 描述
visible 默認。內容不會被修剪，會呈現在元素之外。
hidden 內容會被修剪，但是瀏覽器不會顯示供查看內容的滾動條。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。