Bootstrap环境下实现文本超出两行后末尾显示...的方法咨询

可以实现最多显示两行文本并在末尾添加省略号效果，只需修改你的CSS样式，替换原.teste类的代码即可：

.teste {
  max-width: 30ch;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 指定最多显示2行 */
  text-overflow: ellipsis;
}

关键说明： #

• 移除原代码中的white-space: nowrap（这是单行省略的核心属性）
• 使用WebKit私有属性组合实现多行文本的行数限制与省略逻辑
• 保留max-width: 30ch的宽度限制，确保文本在指定宽度内触发省略效果

该方案兼容现代主流浏览器，与Bootstrap卡片组件可完美配合。

内容的提问来源于stack exchange，提问作者Leonardo Lima