css+html强制换行及禁止换行问题

一 解决html页面纯英文和数字不自动换行，但中文就可以自动换行的问题

添加css属性

word-break:break-all;
word-wrap:break-word;

二.HTML标签超过部分展示为省略号

1. 超出固定长度（块元素block,如果是行内块元素用inline-block）

span {
    display: block;
    width:100px;/*指定宽度*/
    overflow: hidden;/*超出部分隐藏*/
    text-overflow: ellipsis;/*文字超出部分以省略号显示*/
    white-space: nowrap;/*内容超宽后禁止换行显示*/
}

2. 超出一行

span {
  white-space: nowrap;/*内容超宽后禁止换行显示*/
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/*文字超出部分以省略号显示*/
  }

3. 超出三行

.p1{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

三.以下是具体说明：

1.white-space

white-space 属性是用来设置如何处理元素中的空白

normal 默认。连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。

nowrap 文本不换行在同一行上继续，直到遇到 br 标签为止，连续的空白符会被合并。

pre 连续的空白符会被保留。在遇到换行符或者
元素时才会换行。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

2. word-wrap 属性

word-wrap 属性用来标明是否允许浏览器在单词内进行断句

normal: 只在允许的断字点换行(浏览器保持默认处理)

break-word:在长单词或URL地址内部进行换行， 内容将在边界内换行。如果 需要，单词内部允许断行。

3. word-break 属性

word-break 属性用来标明怎么样进行单词内的断句

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

break-all:允许在单词内换行，允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。

keep-all:只能在半角空格或连字符处换行，不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。