Material Design 中如何处理换行和截断文本-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，文本的排版和处理是非常重要的一环。在 Material Design 中，对于文本的处理有着非常详细和严谨的规定。本文将会重点讨论 Material Design 中如何处理换行和截断文本，并给出实际的代码示例。

换行

在 Material Design 中，对于文本的换行有着明确的规定：在容器边界内，文本应该自动换行，而不是超出容器边界。这一规定的目的是为了保证容器的整体美观和可读性。

在实际开发中，我们可以使用 CSS 的 word-break 和 overflow-wrap 属性来实现自动换行的效果。下面是一段示例代码：

.container {
  width: 200px;
  word-break: break-all;
  overflow-wrap: break-word;
}

在上述代码中，我们使用了 word-break: break-all 和 overflow-wrap: break-word 两个属性来实现自动换行的效果。其中，word-break 属性用于控制单词的断行方式，break-all 表示单词内部也可以断行；overflow-wrap 属性则用于控制在单词内部断行时的处理方式，break-word 表示在单词内部断行时会尽量保证每个单词的完整性。

截断

在 Material Design 中，对于文本的截断也有着明确的规定：截断的文本应该以省略号（...）表示，而不是直接截断。这一规定的目的是为了保证截断后的文本仍然能够传达足够的信息，同时避免截断后的文本过于生硬和不美观。

在实际开发中，我们可以使用 CSS 的 text-overflow 和 white-space 属性来实现截断文本并添加省略号的效果。下面是一段示例代码：

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述代码中，我们使用了 white-space: nowrap 属性来控制文本不换行，使用了 overflow: hidden 属性来控制文本溢出时隐藏，最后使用了 text-overflow: ellipsis 属性来表示截断后添加省略号。

需要注意的是，上述代码只适用于单行文本的截断。如果需要截断多行文本，我们可以使用 JavaScript 来实现。下面是一个简单的示例代码：

// www.javascriptcn.com code example
<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet massa quam.
  </div>
  <button class="btn">Show More</button>
</div>

<script>
  const content = document.querySelector('.content');
  const btn = document.querySelector('.btn');
  let isTruncated = true;

  btn.addEventListener('click', () => {
    if (isTruncated) {
      content.style.webkitLineClamp = 'unset';
      btn.textContent = 'Show Less';
    } else {
      content.style.webkitLineClamp = '2';
      btn.textContent = 'Show More';
    }
    isTruncated = !isTruncated;
  });
</script>

<style>
  .container {
    width: 200px;
    display: flex;
    flex-direction: column;
  }
  .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

在上述代码中，我们使用了 -webkit-line-clamp 属性来控制多行文本的截断，并使用 JavaScript 来实现展开和收起的功能。需要注意的是，-webkit-line-clamp 属性只适用于 WebKit 内核的浏览器，如果需要兼容其他浏览器，可以使用 display: -webkit-box 和 -webkit-box-orient: vertical 属性来实现。

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

Material Design 中如何处理换行和截断文本

换行

截断

接着读