How to set automatic line wrapping in span tag

The span tag is used to group inline elements in the document. span has no fixed format representation. When a style is applied to it, it creates a visual change. When the content is too long, we can hide the overflow part through the overflow: hidden; setting. However, in some application scenarios, we hope that the content can automatically wrap, such as the product name in the product information display of the mall.

What we need to use here is the white-space attribute in CSS. The white-space attribute sets how whitespace within an element is handled. The relevant attribute values ​​are as follows:

normal Default value, blank spaces will be ignored by the browser.
pre White space will be preserved by the browser. It behaves like the

 tag in HTML. <br>nowrap The text will not wrap, the text will continue on the same line until the <br> tag is encountered. <br>pre-wrap Preserves whitespace sequences, but wraps normally. <br>pre-line merges whitespace sequences but retains newlines. <br>inherit specifies that the value of the white-space attribute should be inherited from the parent element. <p class="MsoNormal"> </p><p class="MsoNormal"> </p><p class="MsoNormal">We can use normal or pre-wrap to set line breaks. Let me demonstrate it directly through a case. Here I use the Chanzhi website building system locally. The mall function, the default effect is as follows: </p><p class="MsoNormal" style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/194/6979009b08382c56710359c426836286-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p class="MsoNormal">Because the title is too long, the following ones are ignored and hidden. Now I want the title to appear complete and wrap automatically, and the price to appear below the title. We control the style directly through CSS code in the CSS box of the backend product block: </p><p class="MsoNormal"> </p><pre class='brush:php;toolbar:false;'>#blockID p.card-heading span
{
    width: 100% !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

Finally, let’s take a look at the final results and customer cases:

# #

The above is the detailed content of How to set automatic line wrapping in span tag. For more information, please follow other related articles on the PHP Chinese website!