css如何实现强制换行、不换行以及自动换行
css对于文本换行的操作，有好几种控制，下面我们简单介绍下。
操作方法
- 01
准备工作 启动编辑器，在编辑器里输入三段比较长的文本，并控制div容器box的宽度。用css定义box样式： .box{width: 300px;border: 3px solid #ccc;margin:40px;}
- 02
通用情况 一般情况下，亚洲语言文本是会自动换行的。如图：
- 03
强制文本不换行 假设我们要设置box1容器的文本不换行。我们可以用css这样定义： .box1{white-space: nowrap;} 可以看出，box1里面的文本没有换行，直接溢出显示。
- 04
强制文本换行 关于第二个box2容器，我们可以看到英文已经溢出来了。现在我们要将它换行，可以用css这样定义，强制英文单词断行： .box2{word-break:break-all; }
- 05
文本自动换行 关于第三个容器，我们想让它以后都是自动换行。可以这样定义css： .box3{word-wrap: break-word; word-break: normal; }
- 06
小结 ①white-space:nowrap;常用于新闻展示情况下经常会用到，如果溢出容器，就加上overflow:hidden; text-overflow:ellipsis;隐藏并添加省略号。 ②word-break:break-all; 主要就是用于英文单词换行。 ③word-wrap: break-word; word-break: normal; 是适用于亚洲语言文本换行。
赞 (0)