CSS超出两行隐藏，但第三行仍然会溢出部分文字

问题：CSS超出两行隐藏，但第三行仍然会溢出部分文字

隐藏的代码是这样的 ，第二行是出现了省略号，但是第三行还是会溢出汉字：

  word-break: break-all;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;

解决：需要再P标签外面在包一个div，给div设置padding就可以；

<div class="train-file-box" v-for="(item, index) in projectFileList" :key="index">
      <span class="train-file" @click="handlePreview(item)">{{ item.title }}.{{ item.format }}        
      </span>
</div>

.train-file-box {
  width: 210px;
  padding: 8px 16px;
  background: #f4f4f4;
  cursor: pointer;
  margin-right: 24px;
  margin-bottom: 15px;
}
.train-file {
  cursor: pointer;
  color: #0154b9;
  font-size: 14px;
  letter-spacing: 0.16px;
  line-height: 18px;
  word-break: break-all;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}