解决多行标题，末行宽度不够时显示省略

来源：互联网发布：整进度计划软件编辑：程序博客网时间：2024/04/29 04:34

在开发网站时多会遇到定义标题时，出现文字溢出现象，如是单行文字，则可以直接用css3的属性进行解决，使其超出宽度部分已省略号代替如：

“width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis”即可；

但如果入到行文本，末行溢出时，往往需要借助插件，实现省略号代替溢出文字，如电商网站的商品标题等；在这里利用-webkit-box，及-webkit-line-clamp和-webkit-box-orient属性即可实现（注意，后两个属性为-webkit的私有属性，不尽兼容其他浏览器），实现方式如下：

.title{    height: 30px;    display: -webkit-box;    line-height: 15px;    white-space: normal;    color: #000;    overflow: hidden;    text-overflow: ellipsis;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    word-break: break-word;}

<div class="title">这是标题这是标题这是标题这是标题这是标题这是标题这是标题</div>

-webkit-line-clamp、-webkit-box-orient两个属性定义div从第几行开始超出部分已省略号代替

0 0