关于文本:整理word-wrap等

逼自己说几句


自己对于文本在块级元素中如何排列的一直不太懂,单词如何换行,是否可以设置换行的机制,代码中单词与单词间的空白是否能保留,如何保留如何设置,好吧,其实要想了解这些特性,必须全面了解一下三个属性,word-wrap word-break white-space,请看文章

word-wrap (CSS3新增)


身在块级元素的行内元素的文本碰到块级元素的边界时,会自动换行,这个我们都知道

如果块级元素中存在一个比较坑爹的长单词,会怎么办呢

HTML

  <div class="mydiv">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</div>

CSS

.mydiv {
  width: 100px;
  border: 3px solid red;
}

这种场景下比较尴尬,行内元素的文本跑出去了

其实,我们可以用overflow: auto或者干脆overflow:hidden来避免这种尴尬,但是不优雅,利用CSS3的word-wrap就可以避免了

word-wrap属性有两个值

  • normal (默认值)
  • break word

来看看添加了word-wrap: break-word后的效果吧

能不能让短单词也强制换行呢,这样的排版更整齐一些

word-break (CSS3新增)


word-break属性有三个值

  • normal (默认)
  • break-all
  • keep-all

break-all可以强行阶段英文单词,达到词内换行的效果

来看看添加了word-break: break-all的效果吧

keep-all比默认的normal更加保守,它指定只有在文本里的遇到空格,标点符号以及连字符的时候才会换行

综上所述,对于文本来说,最好的处理方式是行内换行,而不是词内换行,比如这样

word-wrap: break-word;
overflow: hidden;

换行机制了解过后,也该研究研究文本内的空白的保留机制

white-space


white-space有这么几个值

  • normal (默认)

  • pre

  • no-wrap

  • pre-line

  • pre-wrap

  • inherit

  • normal: 空白处会被浏览器忽略(无论打多少空格或者回车浏览器指挥显示出一个空格),如下图所示:

1. pre: 空白处会被浏览器保留,其行为方式就类似于HTML中的<pre>标签

2. nowrap: 文本不会换行,文本会在同一行上,直到碰到了换行标签<br />为止

3. pre-line: 合并空白符序列,但保留换行符

4. pre-wrap: 保留空白符序列,但是正常进行换行

好像这么看并不能区分出prepre-wrap的区别,那就上个例子吧

HTML

<div class="mydiv pre">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="mydiv pre-wrap">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

CSS

.mydiv {
  width: 300px;
  border: 3px solid #aaa;
}
.pre {
  white-space: pre;
}
.pre-wrap {
  white-space: pre-wrap;
}

就是这样


参考文献

(完)

文档信息

  • 自由转载-非商用-非衍生-保持署名
  • 发表日期:2016年9月18日

推荐阅读更多精彩内容

  • CSS3中的word-wrap、word-break、white-space想必大家都接触过,今天我们来一起温故而...
    叮咯咙咚DQ阅读 83评论 0 0
  • 文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择...
    张歆琳阅读 5,346评论 1 7
  • 关于颜色的小知识 颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时,但是现在大多数电...
    Zd_silent阅读 98评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 624评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 667评论 0 9