Bootstrap卡片中text-overflow:hidden末尾省略号效果失效的解决方法

嘿，我来帮你搞定这个多行文本省略的问题！你遇到的情况很常见——text-overflow: ellipsis 默认只支持单行文本，当你设置了 white-space: normal 让文本自动换行后，这个属性就无法正常工作了。下面是具体的修复方案：

原因分析 #

你的原CSS代码里：

.dscrptn_limit{
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    height: 180px;
    text-overflow: ellipsis;
}

text-overflow: ellipsis 只有在文本处于单行（white-space: nowrap）且溢出时才会触发，而你开启了自动换行，所以省略号自然不会显示出来。

解决方案：多行文本省略实现 #

我们可以利用WebKit的私有属性来实现多行文本的溢出省略，这是目前现代浏览器支持最广泛的方案。修改你的CSS如下：

.dscrptn_limit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 这里设置你想要显示的行数，比如6行，可按需调整 */
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
    width: 100%;
}

参数说明： #

• display: -webkit-box：将元素作为弹性伸缩盒子模型显示
• -webkit-box-orient: vertical：设置伸缩盒子的子元素排列方式为垂直方向
• -webkit-line-clamp: 6：限制文本显示的行数，超过这个行数的内容会被隐藏并显示省略号
• 去掉了固定的height，改用行数控制更灵活，能避免不同字体大小下的适配问题

完整示例代码 #

把你的代码替换成下面的版本就能看到效果了：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="card m-4" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">My title</h5>
    <small class="card-text">topic</small>
    <br>
    <small class="card-text dscrptn_limit">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare sodales ipsum porta rhoncus. Aliquam aliquam metus a volutpat porta. In vitae lacus mi. Mauris non lacus non ligula lobortis malesuada. Suspendisse quis nibh consectetur erat accumsan porttitor. Mauris mollis, nibh ut porta tincidunt, ipsum risus sagittis elit, sed venenatis felis neque aliquet lectus. Sed tempus, orci et placerat lacinia, tellus massa semper diam, rutrum accumsan leo velit at nunc. Praesent et dignissim orci, eget dapibus urna. Mauris rhoncus tortor in risus egestas, a mattis metus sollicitudin. Suspendisse in urna non dui placerat vehicula ac et ante. Nulla ipsum mauris, varius sit amet leo non, vulputate lacinia libero. Etiam sit amet lobortis leo. Pellentesque egestas purus a ipsum consequat, at aliquam est sodales. Sed placerat, mi in rhoncus aliquet, mi ipsum rhoncus odio, sed interdum massa tellus quis mauris
    </small>
  </div>
</div>
<style>
  .dscrptn_limit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
    width: 100%;
  }
</style>

兼容性说明 #

这个方案在Chrome、Safari、Edge等WebKit内核浏览器中完美支持；如果需要兼容Firefox，你可以考虑用JavaScript动态截取文本并添加省略号，但对于大多数现代项目来说，WebKit方案已经足够覆盖大部分用户场景啦。

内容的提问来源于stack exchange，提问作者Kanchon Gharami