如何在SCSS中复用Bootstrap的text-truncate类而非直接写在HTML中？

嘿，我来帮你搞定这个问题～首先得明确：你写的那种@import "text-truncate" from "bootstrap.scss"加上use text-truncate的写法是行不通的，原因有两个：

1. SCSS没有use这种语法来直接调用CSS类；
2. Bootstrap的text-truncate是一个现成的CSS类，不是SCSS混入（mixin），没法通过这种方式单独导入复用。

不过有两种靠谱的方法可以实现你想要的效果，让你在SCSS里给自定义元素复用这个截断文本的样式：

方法一：用@extend继承Bootstrap的类 #

如果已经在项目里导入了Bootstrap的SCSS文件，你可以直接让自定义类继承text-truncate的所有样式，代码如下：

// 先确保正确导入Bootstrap的SCSS（路径根据你的项目结构调整）
@import "bootstrap";

.myBeautifulDiv {
  @extend .text-truncate;
  // 这里还可以添加你自己的额外样式，比如设置宽度（因为文本截断需要元素有固定宽度才生效）
  width: 300px;
}

这样编译后，.myBeautifulDiv就会拥有text-truncate的所有样式：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，同时还能保留你自己加的自定义样式。

方法二：自定义SCSS混入（Mixin） #

如果你不想依赖Bootstrap的完整导入，或者想更灵活地控制样式，可以自己把text-truncate的核心样式封装成一个混入，然后在需要的地方调用：

// 定义一个text-truncate的混入，和Bootstrap的实现完全一致
@mixin text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myBeautifulDiv {
  @include text-truncate;
  // 自定义样式
  width: 200px;
  border: 1px solid #eee;
}

这种方法的好处是不需要导入整个Bootstrap，只需要复用核心的截断逻辑，适合轻量化的场景。

最后提醒一下：文本截断效果生效的前提是元素要有固定宽度（或者最大宽度），所以不管用哪种方法，记得给你的.myBeautifulDiv设置合适的宽度哦～

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