CSS排版技巧大揭秘！字自己换行，不再晕眩眼花

说到网页设计的排版，别让一大堆密密麻麻的字搞得你头晕眼花了。那么，CSS里让字自己换行的技巧就很有用！

白板符属性控制

咱们做网页排版的时候，可得懂用白空间这个好帮手。它有三种模式哦：常规(normal)、预格式化(pre)和不分行(nowrap)。首先，顺手选 normal 就行了，这是默认的换行设置哦；再者，要是想保持每行的空格和标点符号不变，那就试试pre功能吧；然后，假如你就是看不得文字分开，硬要挤在一行，那就果断选择 nowrap ！

示例一：强制同行显示

<pre class='brush:css;toolbar:false;’>.nowrap {
white-space: nowrap;
}

说到让字串不动跑别的地方的问题，你懂的，选”不换行”就对了！这样不管是空格还是回车键，都只能老老实实待在这儿，哪儿也去不了~

  这是一个很长的文本，我们在这里使它不进行换行处理。

示例二：超出部分隐藏

试试呗！字要是跑到外头去了，可得小心点把它们带回来，不然会乱跑的。简单来说，用下 overflow和text-overflow这俩样式属性就能搞定。先找到最大宽度在哪儿，多出那点儿干脆不让它显示好了，省得碍眼，剩下的就用”…”来表示~

.overflow {
  width: 300px; /* 给容器指定宽度，超出部分进行隐藏 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分进行隐藏 */
  text-overflow: ellipsis; /* 超出部分使用“...”进行省略 */
}

示例三：单词连着走

  这是一个很长的文本，我们将它放在容器中限制宽度，并使超出部分进行隐藏，使用“...”进行省略。

来，跟你分享个牛逼的小办法！要是担心拼错字搞得忘记主题跑题了，就让pre哥们儿大显身手。有它在，不管怎么乱写都不怕，直接让你远离失误和反感。