Detailed explanation of CSS text layout properties: text-overflow and white-space

Detailed explanation of CSS text layout properties: text-overflow and white-space

In web design, text layout is a very important link, and reasonable layout can Make text more readable and beautiful. CSS provides several properties to control how text is displayed, including text-overflow and white-space. This article will detail the usage and sample code of these two properties.

1. Text-overflow attribute

The text-overflow attribute is used to control how text is displayed when it exceeds the container. Common values ​​include the following:

1. clip: Default value, the part beyond the container will be clipped.
2. ellipsis: The part beyond the container will be displayed with ellipses (...).
3. string: The displayed string can be customized.

The following is the sample code:

<style>
  .container {
    width: 200px;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
  }
</style>

<div class="container">
  This is a long text that should be truncated with an ellipsis when it overflows.
</div>

In the above code, we use a container and set the width to 200px, and the text content is a long sentence. By setting the white-space attribute to nowrap, it means that no line wrapping is forced, and the overflow attribute is hidden, which means that the part beyond the container is hidden. The most important thing is the text-overflow property, which we set to ellipsis, which means that the excess is displayed with ellipses.

2. White-space attribute

The white-space attribute is used to control the way whitespace characters are processed in text. Common values ​​are as follows:

1. normal: Default value, automatically handles whitespace characters, merges consecutive whitespace characters into one space, and newlines and tabs are also treated as spaces.
2. nowrap: Force no line breaks, merge consecutive whitespace characters into one space.
3. pre: Keep the original whitespace characters and maintain the whitespace format of the text.
4. pre-wrap: Keep the original whitespace characters, allow line breaks, and the text will be displayed in the original format.
5. pre-line: Automatically handle whitespace characters, but retain line breaks, allow line breaks, and the text will be displayed in the original format.

The following is the sample code:

<style>
  .container {
    white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
  }
</style>

<div class="container">
  This is a long text that should wrap when it reaches the container's width.
</div>

In the above code, we use a container and set the white-space attribute to pre-wrap, so that the text will retain the original whitespace, allowing line breaks.

By using the text-overflow and white-space properties, we can more flexibly control the layout of the text to make it more beautiful and readable. In actual web design, we can choose appropriate values ​​as needed and debug based on the sample code.

Summary:

text-overflow and white-space are properties in CSS used to control text layout. text-overflow is used to control the display method when the text exceeds the container. Common values ​​​​are clip, ellipsis and string; white-space is used to control the way whitespace characters are processed in the text. Common values ​​​​are normal, nowrap, pre, pre-wrap and pre-line. By properly applying these two properties, we can achieve better text layout effects.

The above is the detailed content of Detailed explanation of CSS text layout properties: text-overflow and white-space. For more information, please follow other related articles on the PHP Chinese website!