滑动多行文本，自定义样式

在移动端，我们经常会遇到带图标(元素)的多行文本超过2行显示...的需求，如果只是简单的使用 css，可以使用 text-overflow 和 overflow-y 属性，但是如果遇到较复杂的场景，比如需要自定义样式，或者需要在文本中添加图标(元素)，就需要通过 JavaScript 来实现。

使用CSS实现多行文本隐藏

<div class="text-container">
  <p>这是一段多行文本，超过2行后将被隐藏。</p>
</div>

<style>
.text-container {
  height: 100px;
  overflow-y: hidden;
}

.text-container p {
  text-overflow: ellipsis;
}
</style>

在上面的代码中，我们使用 CSS 的 overflow-y 属性将文本容器的高度设置为 100px，并将其溢出内容隐藏。然后，我们使用 text-overflow 属性将文本设置为省略号 (...)。这样，当文本超过两行时，它将被隐藏，只显示前两行，并在末尾显示省略号。

使用JavaScript实现滑动多行文本

<div id="text-container">
  <p>这是一段多行文本，超过2行后将被隐藏。</p>
</div>

<script>
var textContainer = document.getElementById("text-container");
var text = textContainer.querySelector("p");

// 设置文本容器的高度
textContainer.style.height = "100px";

// 设置文本溢出属性
text.style.overflow = "hidden";

// 设置文本省略号属性
text.style.textOverflow = "ellipsis";

// 获取文本的高度
var textHeight = text.offsetHeight;

// 如果文本的高度大于文本容器的高度，则添加点击事件
if (textHeight > textContainer.offsetHeight) {
  textContainer.addEventListener("click", function() {
    // 切换文本容器的高度
    textContainer.style.height = textContainer.style.height == "100px" ? "auto" : "100px";
  });
}
</script>

在上面的代码中，我们使用 JavaScript 获取文本的高度，并将其与文本容器的高度进行比较。如果文本的高度大于文本容器的高度，则我们添加一个点击事件侦听器，当用户点击文本容器时，将切换文本容器的高度，从而显示或隐藏文本。

自定义样式

在上面的两个示例中，我们都使用了默认的文本样式。但是，您可以使用 CSS 来自定义文本的样式，例如字体、颜色和背景色。

.text-container {
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
}

.text-container p {
  padding: 10px;
}

在上面的代码中，我们设置了文本容器的背景色、颜色和字体大小。我们还为文本添加了边距，以使其更易于阅读。

结论

通过使用CSS和JavaScript，我们可以轻松地创建滑动多行文本。我们可以自定义文本的样式，并设置文本的显示和隐藏方式。这使得滑动多行文本成为一种非常灵活和强大的技术，可以用于各种不同的场景。