p标签设置指定宽度，文字溢出显示 ......

最新推荐文章于 2024-07-24 10:40:16 发布

码农阿华

最新推荐文章于 2024-07-24 10:40:16 发布

阅读量6.5k

点赞数 3

本文链接：https://blog.csdn.net/qq_35144624/article/details/105555909

版权

html代码：

  <p class="news_info">经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审 经苏州市科学技术局组织专家评审，充分体现了其技术先进性与系统创新 ......</p>

css代码:

.news_info {
    color: #898a8b;
    font-size: 18px;
    border: 1px red solid;
    line-height: 30px;
    height: 60px;
    max-height: 60px;
    overflow: hidden;/* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 溢出用省略号显示 */
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
    -webkit-line-clamp: 2; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
}