CSS 单词折行 word-wrap属性

word-wrap属性用来设置是否允许长单词或 URL 地址在容器的边界处自动换行，取值为 normal | break-word，默认值为 normal。

normal 表示只允许在半角空格或连字符的地方换行，如果没有半角空格或连字符，则长单词或 URL 地址会撑大容器或溢出到容器的外面；break-word 则表示允许长单词或 URL 地址在容器边界处自动换行，显示到下一行。

为了演示不同取值的效果，就可以使用 word-wrap属性，定义两个不同的类。为了方便查看效果，为它们定义了固定宽度和边框。CSS代码如下：

.normal {
word-wrap: normal;
}
.break-word {
word-wrap: break-word;
}
.normal, .break-word {
width: 100px;
height: 50px;
border: 1px solid #444;
display: inline-block;
}

把上述两个不同的类，应用到特定的段落，就可以看到长单词或 URL 地址在容器的边界处自动换行的不同效果。HTML代码如下：

<p class="normal">welcom to www.waibo.wang</p>
<p class="break-word">welcom to www.waibo.wang</p>

上述代码的运行效果如图 3-25 所示：

图3-25 word-wrap属性运行效果

上图中，左侧容器的 word-wrap属性取值为 normal，URL没有换行，而溢出到容器的外面。右侧容器 word-wrap属性取值为 break-word，在碰到容器边界处，URL会自动换行，但是，它并不是按单词换行，而是直接将URL截断换行，这显然会增加阅读的难度。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 单词折行 word-wrap属性相关推荐

TextView 显示出现单词折行问题
解决办法: 使用replaceAll("\\s", " ")过滤掉各种空白符即可实现目的. 原因: \\s表示空格,回车,换行等空白符,但是TextView的 ...
css标签折行显示溢出隐藏,css 文本自动换行和超出隐藏
强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 white-space:nowrap; } 超出 ...
[css] flex 间距 gap 折行滚动（九宫格四宫格横向滚动）
间距 gap 给 flex 布局设置一个 gap 属性,比如说 24 像素,那么 flex 布局下边的每个元素之间,就会有一个 24 像素的空隙 <main><div class=& ...
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法...
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折 ...
td 属性 noWrap 防止折行、撑开(及其它文字换行问题)
td 属性 noWrap 防止折行.撑开(及其它文字换行问题) 我用为td中noWrap属性来防止td数据折行 <td class="text_left" noWrap=&q ...
CSS 单词换行 word-break属性
word-break属性用来规定自动换行的处理方式,它不仅可以让浏览器在半角空格或连字符的后面换行,也可以实现在任意位置换行,可选值有 normal | keep-all | break-all,默认 ...
前端，整行英文单词超出范围，单词完整折行
前端,整行英文单词超出范围,单词完整折行 word-wrap指内容要超出该行范围时,具体如何换行. white-space: nowrap; 规定段落中的文本不进行换行 word-wrap指内容要超出 ...
html div文本自动换行,html中使用css控制div、p、td等自动换行、自动折行方法
自动换行.自动折行已经是个老问题,使用css控制很简单,不过如果稍不注意可能解决了一却忽略了二,所以需要个完整解决办法. 需要搞定html中所有标签,比如div.p.td等. 方法: 这个方法支持ie ...
1.1 css style 样式定义：行内 style 属性、单页＜style＞标签、多页＜style＞标签
1.1 style 样式定义:行内 style 属性.单页 <style> 标签.多页 <style> 标签文章目录 1.1 style 样式定义:行内 style 属性.单 ...

CSS 单词折行 word-wrap属性

CSS 单词折行 word-wrap属性相关推荐

最新文章

热门文章