span p 標簽字體換行和溢出隱藏省略號

1. 常遇到span標簽中中文和數(shù)字會換行的情況，如下：

這個時候個標簽設置 word-break 屬性即可
word-break屬性

2. 在使用span 或 p標簽時，字體經(jīng)常會溢出父級div或者字數(shù)太多，這個時候就需要溢出省略號顯示了

  • 加上下面代碼即可
.class-name {
  word-break: break-all;
  overflow: hidden;
   text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;  // 數(shù)字代表文字需要顯示幾行
}
  • 再加上title效果更加
<span class="class-name" :title="className">
    {{ className }}
</span>
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容