How to wrap HTML span tags automatically? Introduction to the usage of HTML span tag

This article mainly tells you how to automatically wrap HTML span tags, and introduces the use and introduction of the seven attributes of span. Next, let’s take a look at this article

First of all, we will introduce how to make span tags automatically wrap. Let’s take a look at this example first:

<span style="width:80%;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;color:#0066CC;">这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；</span>

Explanation of examples of HTML span tags:

white-space: Control the layout of the text displayed on the page through the layout of the source code of the HTML document

Value: normal | pre | nowrap | pre-wrap | pre-line | inherit

• normal: Normal no change (default processing method. The text automatically handles line breaks. If the container boundary is reached, the content will go to Next line)

• pre: Keep the spaces and line breaks of the HTML source code, equivalent to the pre tag

• nowrap: Force the text to be on one line, unless When encountering the br newline tag

• pre-wrap: The same as the pre attribute, but it will automatically wrap when it exceeds the scope of the container

• pre- line: Same as the pre attribute, but when encountering consecutive spaces, it will be treated as a space

Look at the display of the above code in the browser:

As shown in the picture above, the text shown in the above picture only occupies 80% of the page. It seems that it is OK to use this setting to automatically wrap lines.

Let’s look at an example of HTML span tag:

<p>
<span>这只是普通文本</span>
这也是普通文本</p>

Explanation of HTML span tag:

If it’s wrong span applies a style, then the text in the span element will not have any visual difference from other text. Still, the span element in the example above adds extra structure to the p element.

You can apply id or class attributes to span, which can not only add appropriate semantics, but also facilitate the application of styles to span.

It is possible to apply either class or id attributes to the same element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements.

Tip: In fact, you may have noticed that the "tip" is in bold orange. Although there are many ways to achieve this effect, our approach is: use the "hint" to use the span element, and then apply class to the parent element of the span element, that is, the p element, so that you can apply span to the child element of this class Corresponding style.

HTML:

<p class="tip"><span>提示：</span>这里是PHP文本</p>

CSS:

p.tip span {
font-weight:bold;
color:#ff9955;
}

The rendering is very simple:

##[Editor’s recommendation]

html Is the p tag a single tag? Introduction to the use of html p tags (with examples included)

#html How to create a select drop-down box style? Detailed explanation of html select style

The above is the detailed content of How to wrap HTML span tags automatically? Introduction to the usage of HTML span tag. For more information, please follow other related articles on the PHP Chinese website!