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 e03b848252eb9375d56be284e690e873 tag in HTML.
nowrap The text will not wrap, the text will continue on the same line until the 0c6dc11e160d3b678d68754cc175188a tag is encountered.
pre-wrap Preserves whitespace sequences, but wraps normally.
pre-line merges whitespace sequences but retains newlines.
inherit specifies that the value of the white-space attribute should be inherited from the parent element.

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:

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:

#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!