【css】单行多行溢出隐藏设置

实现代码

    /* 单行隐藏 - 支持中文截断、英文截断 */
    .single-line-CN , .single-line-EN{
		width: 200px;
	    word-break: break-all;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	}
	/* 多行隐藏 - 只支持webkit内核 */
	.more-line-CN{
	    width: 200px;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
           -webkit-line-clamp:2;
	    overflow: hidden;
	}

---

属性详解

word-break

[info] 在恰当的断字点进行断字，即浏览器对自动换行的处理方式

浏览器兼容性

*所有的浏览器都兼容该属性

语法

work-break:normal(默认值) | break-all | keep-all

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

实例测试
https://www.w3school.com.cn/tiy/t.asp?f=css3_word-break

text-overflow

[info] 当文本元素溢出包含元素时所发生的事情

浏览器支持

*所有浏览器均支持text-overflow属性

语法

text-overflow: clip(默认值) | ellipsis | string

| 值 | 描述 |
| clip | 修剪文本。
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |

实例测试
https://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow

white-space

[info] 如何处理元素内的空白

浏览器支持

*所有的浏览器都支持white-space属性

[danger] IE浏览器都不支持属性值inherit

语法

white-space:normal（默认值）| pre | nowrap | pre-wrap | per-line | inherit

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

实例测试
https://www.w3school.com.cn/tiy/t.asp?f=csse_text_white-space

-weblit-line-clamp

[info] 限制盒模型到指定的行数

[danger] -webkit-line-clamp是不规范样式，只能和display:-webkit-box和-webkit-box-orient:vertical配合使用。一般还要配合使用overflow:hidden，否则，在相对应的行数上只能是出现省略号而不会隐藏剩下的内容