CSS属性探秘系列(二)：overflow及相关属性text-overflow

下面是详细讲解"CSS属性探秘系列(二)：overflow及相关属性text-overflow"的完整攻略。

概述

在设计和开发网页时，经常会遇到显示内容超出容器范围的情况，这时候就需要用到overflow属性。overflow属性决定了如何处理超出容器宽度和高度的内容。

overflow属性常用的值有四种：

• visible：默认值，超出部分不会被剪裁，会呈现在容器外部。
• hidden：超出部分被剪裁，不可见。
• scroll：出现滚动条，可以滚动查看超出部分。
• auto：根据需要自动出现滚动条。

另外，overflow属性还有两个常用的补充属性，分别是overflow-x和overflow-y，分别决定了超出容器宽度和高度时的处理方式，可选属性值同overflow。

text-overflow属性

在处理文本内容时，特别是在响应式设计中，常常会出现文本内容长度不定的情况，这时候如果直接把文本放入容器中，可能会导致布局时出现异常，影响美观性和用户体验。此时可以使用text-overflow属性来解决这个问题。

text-overflow属性用于在一行文本溢出时，以何种方式截取多余部分（例如在一个单元格内显示日期时间）。需要设置white-space属性的值为nowrap，同时设置一个固定的宽度和overflow属性的值为hidden或scroll，才能生效。

text-overflow属性有三个值：

• clip：直接剪裁文本，不显示省略号，比较生硬。
• ellipsis：省略多余文本，显示省略号。
• string：显示指定字符串，而不是默认的省略号，可以是任意字符串。

示例

案例一：省略号显示内容

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Cras non metus et est malesuada fringilla sed vitae orci.</p>
  <p>Donec consequat sollicitudin porta. Aenean lectus diam, auctor ut arcu eget, lobortis iaculis ex.</p>
  <p>Etiam diam urna, congue ac diam in, tincidunt accumsan neque.</p>
  <p>Morbi ac gravida massa, vel vestibulum enim. Fusce quis turpis sed ex tristique volutpat at a metus.</p>
  <p>Quisque sit amet sem eu sapien scelerisque vehicula sit amet in ex. Sed vel ex et velit consequat eleifend.</p>
</div>

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

上面的示例中，容器的宽度为200px，高度为100px，当容器内的文本内容超过容器的宽度时，文本内容会被省略，多余部分用省略号表示。

案例二：使用string属性来显示文本内容

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Cras non metus et est malesuada fringilla sed vitae orci.</p>
  <p>Donec consequat sollicitudin porta. Aenean lectus diam, auctor ut arcu eget, lobortis iaculis ex.</p>
  <p>Etiam diam urna, congue ac diam in, tincidunt accumsan neque.</p>
  <p>Morbi ac gravida massa, vel vestibulum enim. Fusce quis turpis sed ex tristique volutpat at a metus.</p>
  <p>Quisque sit amet sem eu sapien scelerisque vehicula sit amet in ex. Sed vel ex et velit consequat eleifend.</p>
</div>

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

上面的示例中，容器的宽度为200px，高度为100px，当容器内的文本内容超过容器的宽度时，文本内容会被省略，多余部分使用指定的字符串替代。可以通过设置content属性值来指定显示的字符串。

总结

text-overflow属性用于解决文本内容超出容器范围时的问题，常用于响应式设计中的文本溢出问题。本文对overflow属性及其三种常用值进行了详细介绍，同时对text-overflow属性进行了深入分析，希望对学习CSS开发的同学有所帮助。