span p 标签字体换行和溢出隐藏省略号

1. 常遇到span标签中中文和数字会换行的情况,如下:

这个时候个标签设置 word-break 属性即可
word-break属性

2. 在使用span 或 p标签时,字体经常会溢出父级div或者字数太多,这个时候就需要溢出省略号显示了

  • 加上下面代码即可
.class-name {
  word-break: break-all;
  overflow: hidden;
   text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;  // 数字代表文字需要显示几行
}
  • 再加上title效果更加
<span class="class-name" :title="className">
    {{ className }}
</span>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容