av手机免费在线观看,国产女人在线视频,国产xxxx免费,捆绑调教一二三区,97影院最新理论片,色之久久综合,国产精品日韩欧美一区二区三区

網(wǎng)頁設(shè)計(jì)

css實(shí)現(xiàn)文字過長顯示省略號的方法

時間:2025-05-06 12:12:49 網(wǎng)頁設(shè)計(jì) 我要投稿
  • 相關(guān)推薦

css實(shí)現(xiàn)文字過長顯示省略號的方法

  因?yàn)榫W(wǎng)頁排版的需要,有些地方需要過長的問題加上省略號。比如:標(biāo)題限制20個中文的寬度,超出的就用省略號代替。之前會使用程序截取的方法,不過使用css來截取更有利于SEO。跟隨小編去看看吧!

  下面就介紹一下具體的使用方法:

  <p class="title">當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記</p>

  這是一個例子,其實(shí)我們只需要顯示如下長度:

  css實(shí)現(xiàn)網(wǎng)頁中文字過長截取...

  title class應(yīng)該這樣寫:

  .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  說明:

  1、寬度一定要設(shè)置,可以根據(jù)實(shí)際需求調(diào)整。

  2、white-space:nowrap是禁止文字折行。

  3、text-overflow表示當(dāng)文本溢出時是否顯示省略標(biāo)記,有兩個值:

  clip:不顯示省略標(biāo)記(...),而是簡單的裁切。

  ellipsis:當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...)

  4、overflow:hidden表示溢出內(nèi)容為隱藏。

  示例效果圖:

  #FormatImgID_0#

  示例代碼:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>text-overflow</title>

  </head>

  <body>

  <style type="text/css">

  .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}

  .test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}

  </style>

  <h2>text-overflow : clip </h2>

  <p class="test_demo_clip">

  不顯示省略標(biāo)記,而是簡單的裁切條

  </p>

  <h2>text-overflow : ellipsis </h2>

  <p class="test_demo_ellipsis">

  當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記

  </p>

  </body>

  </html>

【css實(shí)現(xiàn)文字過長顯示省略號的方法】相關(guān)文章:

css實(shí)現(xiàn)鼠標(biāo)滑過改變文字的方法09-06

用單div實(shí)現(xiàn)CSS繪圖方法08-11

CSS3實(shí)現(xiàn)選項(xiàng)卡切換的方法08-05

如何實(shí)現(xiàn)CSS右對齊10-29

word文檔中修改文字顯示方向的方法09-09

關(guān)于java讀取文件顯示進(jìn)度條的實(shí)現(xiàn)方法11-02

CSS簡寫方法總結(jié)06-27

CSS+p實(shí)現(xiàn)懸浮效果的實(shí)例10-05

css實(shí)現(xiàn)的tab切換效果實(shí)例09-16