河北特定网站建设推荐,潍坊网站建设报价费用,怎做网站,论文引用网站怎样做脚注我在一个写一个简单的url展示的时候#xff0c;发现url一直溢出不换行#xff0c;查了各种方法不管用#xff0c;我请教了我大哥#xff0c;他直接甩给我两个css放进去就好了
word-break:break-all; 按字符截断换行 /* 支持IE和chrome#xff0c;FF不支持*/
word-w…我在一个写一个简单的url展示的时候发现url一直溢出不换行查了各种方法不管用我请教了我大哥他直接甩给我两个css放进去就好了
word-break:break-all; 按字符截断换行 /* 支持IE和chromeFF不支持*/
word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */
如果害怕兼容问题可以把 verflow-wrap: break-word; 带上但是一般直接把这两个扔进去基本都能解决 如果有解决不了的特殊的问题或者更好的方法欢迎留言谢谢 word-break: break-all; 作用强制文本在任意字符处换行即使在一个单词内部也会进行换行。例如verylongwordwithoutspaces 可能会被拆分为 verylo 和 ngwordwithou。适用场景适用于需要按字符截断换行的情况特别是当文本中包含长单词或长字符串时可以避免文本溢出容器。浏览器支持广泛支持包括 IE、Chrome 和 Firefox word-wrap: break-word;现在推荐使用 overflow-wrap: break-word;
浏览器兼容性
作用强制文本在任意字符处换行即使在一个单词内部也会进行换行。例如verylongwordwithoutspaces 可能会被拆分为 verylo 和 ngwordwithou。适用场景适用于需要按字符截断换行的情况特别是当文本中包含长单词或长字符串时可以避免文本溢出容器。浏览器支持广泛支持包括 IE、Chrome 和 Firefox。
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleText Wrapping Example/titlestyle.container {width: 200px;border: 1px solid #000;margin: 10px;padding: 10px;}.break-all {word-break: break-all;}.break-word {word-wrap: break-word; /* 旧语法 */overflow-wrap: break-word; /* 新语法推荐使用 */}/style
/head
bodydiv classcontainer break-allThisIsAVeryLongWordWithoutSpacesThisIsAVeryLongWordWithoutSpaces/divdiv classcontainer break-wordThisIsAVeryLongWordWithoutSpacesThisIsAVeryLongWordWithoutSpaces/div
/body
/html
