HTML的经常会遇到一长串连续的字幕或者数字在页面中没办法折断换行，导致了页面排版很乱。

默认情况下，一个 DIV或者其他元素的文本，如果都是无文字分隔符，无空格，则不会自动换行。

其实用一句很经典的CSS，就可以解决这个大麻烦。代码如下：

<div class="detail_title" style="word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

把这段代码放到HTML文件里试试看。

程序员web前端培训分享HTML元素强制不换行，HTML 中 nowrap是用来强制不换行的

在排版中

对包裹plain text的标签使用nowrap属性即刻实现强制不换行.

如:

强制不换行

在使用div的超文本中

把div,h1,section,nav,a,li等元素 强制变成行内元素

display:inline;

然后就能够像第一种情况一样对其进行操作.

例子: 父级nav限宽下ul元素强制不换行

使子标签ul自身有wrap-content(借用android layout的关键形容词)的宽度

nav>ul>li*10>a[href='#']{随机链接$}

nav{ 固定宽度width:40em; nowrap属性white-space:nowrap; }

ul,li,a{ 行内元素display:inline; 消除浮动float:none; }

// li 变成inline是必要的

当ul不为inline的时候,ul本身宽度最大值为父级nav的宽度;

当ul为inline 的时候,ul宽度为wrap-content宽度.

demo见我的导航

SS：

{

word-break: keep-all;

word-wrap: break-word; // 只对英文起作用，以单词作为换行依据。

white-space: pre-wrap; //只对中文起作用，强制换行。

text-align:justify; //css英文语句的两端对齐：

text-justify:inter-ideograph;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

禁止换行：

{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis; //让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-

white-space:nowrap;

}

• 1
• 2
• 3
• 4
• 5
• 6

单行文字如果超出2行用省略号表示：

.text {

width:220px;

word-break:break-all;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

word-break 属性规定自动换行的处理方法。

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

word-break 当行尾放不下一个单词时，决定单词内部该怎么摆放。

break-all: 强行上，挤不下的话剩下的就换下一行显示呗。

keep-all: 放不下了，那就另起一行展示，再放不下，也不退缩。

word-wrap 当行尾放不下时，决定单词内是否允许换行

normal: 单词太长，换行显示，再超过一行就溢出显示。

break-word: 当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行。

white-space: normal | nowrap | pre | pre-wrap | pre-line

• 1

pre: 保留所有的空格和回车，且不允许折行。

pre-wrap: 保留所有的空格和回车，但是允许折行。

pre-line: 会合并空格，且允许折行

text-align:justify 是专门为英文设计的，用来实现英文语句的两端对齐

text-justify :

auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper

• 1
• 2

auto :

默认值。允许浏览器代理用户确定使用的两端对齐法则。

distribute :

处理空格很像newspaper ，适用于东亚文档。尤其是泰文。

distribute-all-lines :

两端对齐行的方式与distribute 相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档

distribute-center-last :

未实现。

inter-cluster :

调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。

inter-ideograph :

为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

inter-word :

通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效

kashida :

通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

newspaper :

通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

说明：设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局，所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。

以上方法对chrome（360也是chrome内核）无效，还需再加上下面代码：

word-break:break-all