css控制字數

來源:互聯網
上載者:User
css控制字數控制文章標題字數,不是動態網頁的專利,如果靜態頁面使用CSS樣式,也可以實現相同的效果!

看這個例子,你們可以複製到記事本儲存為HTML檔案看效果!

<html>
<title>css控制字數</title>
<head>
<style type="text/css">
.dd
{
border: solid 1px gray;
width:180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
course:hand;
}
</style>
</head>
<body>
<span class="dd">

信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數
</span>
<br>
<div class="dd">
信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數信心網使用CSS控制文章標題字數
</div>
</body>
</html>

看到效果後,您應該相信這不是虛言了吧,o(∩_∩)o...!

其中white-space 屬性設定如何處理元素內的空白。

這個屬性聲明建立版面配置階段中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增

的。

繼承性:Yes
JavaScript 文法
CSS 屬性也可通過一段 JavaScript 被動態地改變。

指令碼文法:
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 如果內容被修剪,則瀏覽器會顯示捲軸以便查看其餘的內容。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.