當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css强制换行和禁止换行

發(fā)布時間：2023/12/8 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 css强制换行和禁止换行小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

強制換行?

word-break: break-all;?/* 只對英文起作用，以字母作為換行依據(jù)。? */ word-wrap: break-word;?/* 只對英文起作用，以單詞作為換行依據(jù)。? */? white-space: pre-wrap;?/* 只對中文起作用，強制換行。? */

禁止換行?

white-space: nowrap; /* 禁止換行 */ overflow: hidden; /* 超出隱藏 */ text-overflow: ellipsis; /* 超出內(nèi)容顯示省略號 */

API

white-space: 屬性設(shè)置如何處理元素內(nèi)的空白
normal: 默認。空白會被瀏覽器忽略。
pre: 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標簽。
nowrap: 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 br 標簽為止。
pre-wrap: 保留空白符序列，但是正常地進行換行。
pre-line: 合并空白符序列，但是保留換行符。
inherit: 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap: 屬性用來標明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。
normal: 只在允許的斷字點換行(瀏覽器保持默認處理)
break-word: 在長單詞或URL地址內(nèi)部進行換行

word-break: normal|break-all|keep-all;

word-break 屬性用來標明怎么樣進行單詞內(nèi)的斷句。
normal：使用瀏覽器默認的換行規(guī)則。
break-all:允許再單詞內(nèi)換行
keep-all:只能在半角空格或連字符處換行

<!DOCTYPE html> <html lang='en'> <head><meta charset='UTF-8'><title>Title</title> <style>/* 默認 */.content{border: 1px solid red; width: 100px;margin-bottom: 20px;}/* 強制換行以字母做為換行依據(jù) */.word-break{word-break: break-all;}/* 強制換行以單詞做為換行依據(jù) */.word-wrap{word-wrap: break-word;}/* 強制不換行 */.white-space{white-space: nowrap; }</style> </head> <body><div class="content">aaaaaaaaaaaaaaaaaaa</div><div class="content word-break">aaaaaaaaaaaaaaaaaaa</div><div class="content word-wrap">Title Title Title Title Title Title Title</div><div class="content">這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本</div><div class="content white-space">這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本</div> </body></html>

總結(jié)

以上是生活随笔為你收集整理的css强制换行和禁止换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

css
换行

上一篇： Pinia基本使用与源码分析-手动实现部
下一篇：武汉电博会看点 daydao电商云ERP