How to achieve css text beyond line break

CSS text exceeds line break

In web design, we often encounter situations where text content exceeds the parent container. At this time, we need to use CSS to solve this problem. CSS provides some properties for controlling line wrapping and truncation of text. This article will introduce the usage of these properties and practical cases.

1. Text Wrapping

When the text content exceeds the parent container, we can control the text wrapping method to automatically wrap it within the parent container. The following are commonly used CSS properties:

1. word-wrap

This property is used to specify whether to allow line breaks within words. The default is normal. When the value of this attribute is break-word, if the length of a word exceeds the width of the container, the word will be automatically broken and wrapped.

2. word-break

This attribute is used to specify how to break lines of words. The default is normal. When the value of this attribute is break-all, even a word will be broken even if it does not exceed the width of the container.

The following is an example:

.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}

<div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div>

2. Text truncation

When we need to limit the length of text instead of letting it wrap into new lines, we can use text truncation. The following are several commonly used CSS properties:

1. overflow

This property is used to specify how the content in the parent container will behave when it exceeds the container size. The default is visible. We can set it to hidden, which means that the part beyond the content will be hidden; or set it to scroll, which means that the scroll bar will be displayed.

2. text-overflow

This attribute is used to specify how to display text when it overflows. The default is clip. We can set it to ellipsis, which means that ellipses will be automatically added when the text overflows.

3. white-space

This attribute is used to control how whitespace within the element is processed. The default is normal. We can set it to nowrap, which means that the text should not wrap unless the "br" tag is encountered.

The following is an example:

.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}

<div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会被截断并自动加上省略号。</p>
</div>

The above is the solution for CSS text that exceeds line breaks. I hope it can be helpful to everyone. In the actual development process, we can choose appropriate attributes according to actual needs to achieve the best results.

The above is the detailed content of How to achieve css text beyond line break. For more information, please follow other related articles on the PHP Chinese website!