CSS自动换行、强制不换行、强制断行、超出显示省略号

准备工作

	
	
	


	

		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	
	

		We are very young.So we need to work hard.
	

默认样式是这样的。

多个英文单词默认自动换行，单行字母不自动换行

强制不换行

white-space:nowrap;

自动换行

word-wrap:break-word;

强制英文单词换行

word-break:break-all;

超出显示省略号

text-overflow:ellipsis;
overflow:hidden;

注意

默认情况下，字母不自动换行，中文会自动换行

	
	
	


	

		啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
	

多行文本超出显示省略号

.element{
    width: 20em;
    line-height: 1.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}