当文本内容过长需要保留全部时,我们常规进行换行:
word-break: break-all; // 使中文和英文为一体,一起换行
word-wrap: break-word; // 使中文和英文分开换行
当上述两个方案都换行无效的时候,检查一下
white-space的属性是nowrap还是normal
normal:连续的空白符会被合并,换行符回被当作空白符号处理。填充line盒子时,必要的话会换行
nowrap:和normal一样,连续的空白符会被合并,但文本内的换行无效
超出部分以省略号显示:
display: block; // 内联对象需要添加
white-space: nowrap; // 不换行,属性在文本超出显示省略号的时候大家一定用过
overflow: hidden; // 内容超过宽度时,隐藏超出部分的内容
text-overflow: ellipsis; // 当文本溢出时,显示省略标记(...),需要与overflow: hidden一起使用