如何使用CSS/Javascript实现自动缩进和文本换行 -火山引擎

当每行文本过长并显示不全时，通常情况下会在文本的末尾添加省略号，但有时我们希望能够实现自动缩进和文本换行，使得文本能够按照我们希望的方式排版。下面给出两种实现方案：

CSS方法：

使用CSS属性text-indent实现自动缩进。 使用CSS属性word-wrap实现文本换行。

示例代码：

.overflow-text {
  text-indent: 2em;
  word-wrap: break-word; /* 使用该属性可实现断词换行 */
Javascript方法：
使用Javascript计算文本宽度，如果文本宽度超过容器宽度，则将文本插入到新创建的元素中并添加换行符。
示例代码：
function wrapText(selector) {
  const element = document.querySelector(selector);
  const containerWidth = element.offsetWidth;
  const text = element.textContent;
  let currentWidth = 0;
  let charIndex = 0;
  let result = [];
  while (charIndex < text.length) {
    let currentChar = text[charIndex];
    let charWidth = measureWidth(currentChar); // measureWidth()函数用于计算当前字符的宽度
    if (currentWidth + charWidth > containerWidth) {
      result.push('<br>'); // 添加换行符
      currentWidth = 0;
    result.push(currentChar);
    currentWidth += charWidth;
    charIndex++;
  element.innerHTML = result.join('');
// 示例使用方法
wrapText('.overflow-text');