经常会有一些长单词或URL，因为长度过长以致一行放不下，就会导致文本溢出。
要么出现滚动条，要么会被截断看不见。
为了应对这种情况，可以使用css的word-wrap属性。
p.test {word-wrap:break-word;}
/* 这样就允许长单词换行到下一行了 */
所有主流浏览器都支持 word-wrap 属性 [1]。
但值得注意的是，word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法 [2]。
因此，由于历史原因，当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容 [3]。
[1] CSS3 word-wrap 属性
[2] overflow-wrap - mozilla
[3] overflow-wrap
文本多行溢出溢出 文本强制换行 强制不换行p { white-space:nowrap; }自动换行p { wor...
Css3文本与字体 文本阴影 word-break换行： word-wrap换行(中文无效)： 文本溢出时处理： ...
VScode安装完默认不能自动换行，需要我们手动配置。 文本超出显示时，会溢出，如图：文本超出范围，不能自动换行 ...
经常会有一些长单词或URL，因为长度过长以致一行放不下，就会导致文本溢出。要么出现滚动条，要么会被截断看不见。 为...
单行文本溢出显示省略号 多行文本溢出 文字选中滑动背景色 禁止文本缩放 禁止文本选中 css实现不换行、自...
背景透明，内容不透明 强制换行/不换行 单/多行文本溢出 1). 单行文本溢出 2). 多行文本溢出
参考：CSS换行文本溢出显示省略号多行文本溢出 1. 单行文本 2. 多行文本 跨浏览器兼容的解决方案 适用于移动...
整理一些日常开发中常用css 1、换行 2、CSS实现单行、多行文本溢出显示省略号 单行 （使text-overf...
1.文本类型： 2.文本换行： 3.文本溢出：
：p标签的文本会在一个段落中自动换行。div标签内的文本也会在一个段落中自动换行。 ：换行标签，使自动换行。文本格...
本文标题：CSS长文本溢出自动换行
本文链接：https://www.haomeiwen.com/subject/lfibrhtx.html
网友评论