LESS 中单行文本溢出的解决方式-JavaScript中文网-JavaScript教程资源分享门户

LESS 中单行文本溢出的解决方式

在前端开发中，经常会遇到单行文本溢出的情况，即文本内容超出了元素的宽度，导致文本被截断或者被隐藏。在使用 LESS 进行样式开发时，可以通过一些技巧来解决这个问题。

一、使用单行省略号实现文本溢出

我们可以使用 CSS 的 text-overflow 属性来实现单行文本溢出时的省略号效果。该属性需要配合两个属性 white-space 和 overflow 使用。

.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上述代码中，white-space: nowrap 意味着不换行，overflow: hidden 意味着超出部分隐藏，text-overflow: ellipsis 意味着用省略号表示被隐藏的部分。

二、使用 JS 计算实现文本溢出

如果我们需要动态计算文本溢出的情况，可以使用 JS 来计算文本宽度和容器宽度，从而适时的添加省略号。

.text-ellipsis(@width) {
  display: inline-block;
  max-width: @width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// www.javascriptcn.com code example
function ellipsisText(el) {
  const containerWidth = el.offsetWidth;
  const textWidth = el.scrollWidth;

  if (textWidth > containerWidth) {
    const text = el.textContent;
    for (let i = text.length - 1; i > 0; i--) {
      const ellipsisText = `...${text.slice(i)}`;
      el.textContent = ellipsisText;
      if (el.scrollWidth <= containerWidth) {
        break;
      }
    }
  }
}

在上述 LESS 样式中，我们定义了一个 .text-ellipsis 类，并接受一个参数 @width，用于指定最大宽度。在 JS 代码中，我们接受一个 DOM 元素，计算元素的宽度和文本的宽度，如果文本宽度大于容器宽度，则进行省略号的添加操作，直到文本符合要求。

三、使用 CSS3 属性实现文本溢出

除了以上两种方式外，我们还可以使用 CSS3 的 clamp() 函数实现文本溢出。该函数接受三个参数，分别表示最小值、希望显示的长度、最大值。其中，长度可以使用 auto 或者百分数来表示。

.text-clamp(@width, @length) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: clamp(1, @length, @width);
  line-height: 1.5;
}

在上述 LESS 样式中，我们定义了一个 .text-clamp 类，并接受两个参数 @width 和 @length。其中，-webkit-line-clamp 是一个 CSS 属性，只在 WebKit 引擎的浏览器中生效，用于指定元素最多显示几行文本。通过 clamp() 函数可以动态计算容器高度。

综上所述，通过上述三种方式，我们就可以灵活、高效的处理单行文本溢出的情况。在实际开发中，需要考虑到样式的兼容性和性能问题，选择最合适的解决方式，以达到最佳的用户体验。

示例代码：

// www.javascriptcn.com code example
<body>
  <div class="container">
    <p class="text-overflow">
      这是一段超长的文本，它将会被省略号代替。
    </p>
    <p class="text-ellipsis" id="ellipsis">
      这是一段动态计算省略号的文本，当宽度小于容器宽度时，不会加省略号。
    </p>
    <p class="text-clamp" id="clamp">
      这是一段通过CSS3的clamp()函数实现的文本，当宽度小于容器宽度时，文本会自动折行显示。
    </p>
  </div>
</body>

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis(@width) {
  display: inline-block;
  max-width: @width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp(@width, @length) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: clamp(1, @length, @width);
  line-height: 1.5;
}

const ellipsisEl = document.querySelector('#ellipsis');
const clampEl = document.querySelector('#clamp');

ellipsisText(ellipsisEl);

注意：clamp() 函数的兼容性问题，目前只有 WebKit 内核的浏览器支持该函数。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfc41ae46428fe9ebb39d5

LESS 中单行文本溢出的解决方式

接着读