主页 / coding / 问题 / 79175922
Accepted
gregsdennis
Asked: 2024-11-11 06:03:39 +0800 CST

内容被截断时更改字体大小

  • 772

我有一个 div，它可以包含很长的文本（但并非总是如此）。要求是将文本限制为三行并用省略号截断。我已经弄清楚了这部分。

第二个要求是，当文本被截断时，我需要减小字体大小，例如减小到 16px（要求中指定了大小，而不仅仅是“更小的尺寸”）。

div {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div>
  This is really long text that should
  definitely wrap for three lines and
  then terminate in an ellipsis if it's
  still too long, which it definitely is.
  It also needs to be a smaller font size.
</div>
<hr/>
<div>
  This text isn't long enough so it
  should be bigger.
</div>

是否可以检测文本何时被截断？如果需要，我愿意使用 JS。

像这个和这个这样的基于宽度的解决方案对我来说不起作用，因为它们只适用于单行文本。我需要一些适用于多行截断文本的东西。

html

1 个回答

  1. Best Answer

    如果您愿意使用 javascript，那么下面的代码应该可以满足您的要求。它会检查文本是否溢出，然后为其添加一个类。在本例中，该类只有 16px 的字体大小，但实际上可以有您想要的任何样式。

    function adjustFontSizeForTruncatedText() {
  const elements = document.querySelectorAll('.trunc-text');

  elements.forEach(element => {
    // check if text is overflowing
    if (element.scrollHeight > element.clientHeight) {
      element.classList.add('truncated'); // smaller font size
    } else {
      element.classList.remove('truncated'); // original font size
    }
  });
}

adjustFontSizeForTruncatedText();

// rerun when the window is resized
window.addEventListener('resize', adjustFontSizeForTruncatedText);
    .trunc-text {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s ease;
}

.truncated {
  font-size: 16px;
}
    <div class="trunc-text">
  This is really long text that should definitely wrap for three lines and then terminate in an ellipsis if it's still too long, which it definitely is. It also needs to be a smaller font size.
</div>
<hr/>
<div class="trunc-text">
  This text isn't long enough so it should be bigger.
</div>

    这是另一种类似的方法。你可以选择一种。

    document.querySelectorAll('.trunc-text').forEach(element => {
  if (element.scrollHeight > element.clientHeight) {
    element.classList.add('truncated');
  }
});
    .trunc-text {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s ease;
}

.truncated {
  font-size: 16px;
}
    <div class="trunc-text">
  This is really long text that should definitely wrap for three lines and then terminate in an ellipsis if it's still too long, which it definitely is. It also needs to be a smaller font size.
</div>

<hr/>

<div class="trunc-text">
  This text isn't long enough so it should be bigger.
</div>

    • 3

相关问题