tft每日頭條

 > 圖文

 > css自動換行怎麼設置

css自動換行怎麼設置

圖文 更新时间:2025-01-09 21:48:32

css自動換行怎麼設置?H5代碼:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width: 200px; background-color: #aaa; } .p1{ white-space: nowrap; } .p2{ word-wrap: break-word; } .p3{ word-break: break-all; } .p4{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p> <p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p> <p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p> <p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p> </body> </html>,我來為大家講解一下關于css自動換行怎麼設置?跟着小編一起來看一看吧!

css自動換行怎麼設置(css超出顯示省略号)1

css自動換行怎麼設置

H5代碼:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width: 200px; background-color: #aaa; } .p1{ white-space: nowrap; } .p2{ word-wrap: break-word; } .p3{ word-break: break-all; } .p4{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p> <p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p> <p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p> <p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p> </body> </html>

  1. 強制不換行:white-space 屬性是用來設置如何處理元素中的空白;

屬性:

  • normal 默認。空白會被浏覽器忽略。
  • pre 空白會被浏覽器保留。其行為方式類似 HTML 中的 pre 标簽。
  • nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到 br 标簽為止。
  • pre-wrap 保留空白符序列,但是正常地進行換行。
  • pre-line 合并空白符序列,但是保留換行符。
  • inherit 規定應該從父元素繼承 white-space 屬性的值。

p{ white-space: nowrap;}

2、自動換行:word-wrap屬性用來标明是否允許浏覽器在單詞内進行斷句,這是為了防止當一個字符串太長而找不到它的自然斷句點時産生溢出現象;

屬性:

  • normal: 隻在允許的斷字點換行(浏覽器保持默認處理)
  • break-word:在長單詞或URL地址内部進行換行

p{ word-wrap: break-word;}

3、強制斷行:word-break 屬性用來标明怎麼樣進行單詞内的斷句;

屬性:

  • normal:使用浏覽器默認的換行規則。
  • break-all:允許在單詞内換行
  • keep-all:隻能在半角空格或連字符處換行

p{ word-break: break-all;}

4、溢出顯示省略号:ext-overflow CSS 屬性确定如何向用戶發出未顯示的溢出内容信号。它可以被剪切,顯示一個省略号(’…’,U 2026 HORIZONTAL ELLIPSIS)或顯示一個自定義字符串;

  • 屬性:clip這個關鍵字的意思是"在内容區域的極限處截斷文本",因此在字符的中間可能會發生截斷。為了能在兩個字符過渡處截斷,你必須使用一個空字符串值 (’’)(To truncate at the transition between two characters, the empty string value (’’) must be used.)。此為默認值。
  • ellipsis這個關鍵字的意思是“用一個省略号 (’…’, U 2026 HORIZONTAL ELLIPSIS)來表示被截斷的文本”。這個省略号被添加在内容區域中,因此會減少顯示的文本。如果空間太小到連省略号都容納不下,那麼這個省略号也會被截斷。
  • string用來表示被截斷的文本。字符串内容将被添加在内容區域中,所以會減少顯示出的文本。如果空間太小到連省略号都容納不下,那麼這個字符串也會被截斷。

p{ overflow: hidden; text-overflow: ellipsis;}

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved