css名称多行展示及问题解决

多行展示

最近在项目中，产品提了一个需要，要求文本名称最多三行展示，超出显示…，第一时间就想到了用css样式实现

.doc-title {
  display: -webkit-box; //使用 WebKit 内核的盒模型，这是为了配合后续的属性，实现多行文本的截断和显示控制。
  -webkit-line-clamp: 3; /* 限制文本最多显示三行 */
  -webkit-box-orient: vertical; // 将内部元素的排列方向设置为垂直方向，为多行显示做准备
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

结果遇到一个奇怪的现象，当名称为全汉字时，显示正常，但是当文本中包含汉字、数字、字符等等字符时，显示就出现了问题，会导致文本不换行的情况出现，后来查询到，需要用到 word-break: break-all;来解决，对于长单词或长字符串，特别是在容器宽度有限的情况下，使用 word-break: break-all 可以防止文本溢出容器边界，该属性可以使内容在容器内换行，而不是水平滚动或溢出容器。

以下为完整代码

.doc-title {
  width: 97px;
  font-size: 16px;
   color: #000;
   cursor: pointer;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
}