CSS 怎么设置文字自动换行? 下面本篇文章就给大家介绍 CSS 设置文字 (特别是连续的数字和英文) 自动换行的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对你们有所帮助.
关于换行问题, 正常字符的换行是比较合理的, 但连续的数字和英文字符常常将容器撑大, 而不换行, 就挺让人头疼了, 这就需要进行强制自动换行了.
示例:
html 代码:
- <div class="demo">
- <p > 正常文字的换行 (亚洲文字和非亚洲文字) 元素拥有默认的 white-space:normal, 当定义的宽度之后就会自动换行</p>
- <p > 数字和英文字符:</p>
- <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
- <p > 强制换行后</p>
- <p class="wrap">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
- </div>
CSS 代码:
- .demo .wrap {
- table-layout: fixed;
- Word-wrap: break-all;
- Word-break: normal;
- overflow: hidden;
- }
效果图:
说明:
Word-break: break-all; 设置文字的强制自动换行, 但只对英文起作用, 以字母作为换行依据.
因为文字的容器 p 的宽度为 400px, 所有它的内容会在到达 400px 时自动换行, 但该行末端有个很长的英文单词, 它并不会把单词挪到下一行在显示, 而是在本行把单词截断, 一部分保持在行尾显示, 另一部分换到下一行显示, 这样不是很利于英文的阅读.
Word-wrap: break-Word; 设置文字的强制自动换行, 但只对英文起作用, 以单词作为换行依据.
文字与上面一致, 但区别在于它会把整个单词看成一个整体, 如果该行末端宽度不够整个单词显示, 它就会自动把整个单词放到下一行显示, 而不会把单词截断掉.
来源: http://www.css88.com/qa/css3/11358.html