本文主要是介绍[CSS]CSS换行问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
强制不换行 white-space:nowrap
white-space 属性设置如何处理元素内的空白。
属性[ http://www.w3school.com.cn ]：
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
自动换行 word-wrap:break-word
当长单词或网页地址一行无法显示的时候在下一行显示。
属性[ http://www.w3school.com.cn ]：
| 值 | 描述 |
|---|---|
| normal | 默认。 只在允许的断字点换行。 |
| pre | 在长单词或 URL 地址内部进行换行。 |
强制断行 word-break:break-all
word-break 属性规定自动换行的处理方法
属性[ http://www.w3school.com.cn ]：
| 值 | 描述 |
|---|---|
| normal | 默认。 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
超出内容显示省略号 text-overflow:ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情。
属性[ http://www.w3school.com.cn ]：
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
**注意：**ellipsis只对单行文本生效，且容器overflow:hidden。
点击查看测试页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css换行</title><style>.lists{width: 400px;height: auto;margin: 50px auto;padding: 20px;font-size: 14px;line-height: 1.6em;font-family: 'Microsoft YaHei Light';}.list{width: 100%;height: auto;padding: 5px;border-radius: 3px;border: #aaa 1px solid;background: #fafafa;margin:0 0 25px;text-indent: 2em;}small{font-size: 14px;color: #aaa;font-weight: bold;line-height: 1em;}.nowrap{white-space:nowrap;}.break-word{word-wrap:break-word;}.break-all{word-break:break-all;}.ellipsis{white-space: nowrap;overflow: hidden;text-overflow:ellipsis;height: 20px;}</style>
</head>
<body>
<div class="lists"><small>white-space:nowrap</small><div class="list nowrap">我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</div><small>word-wrap:break-word</small><div class="list break-word">Finally, he found another field where he could hide．He lay down, unable to sleep, his mind filled with visions of the dead girl. Her wide, dead eyes stared at him, watching him through a curtain of blood.</div><small>word-break:break-all</small><div class="list break-all">Finally, he found another field where he could hide．He lay down, unable to sleep, his mind filled with visions of the dead girl. Her wide, dead eyes stared at him, watching him through a curtain of blood.</div><small>text-overflow:ellipsis</small><div class="list ellipsis">我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</div><small>normal</small><div class="list normal">我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</div>
</div>
</body>
</html>
这篇关于[CSS]CSS换行问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
