How does the HTML span tag do wrap? Introduction to the use of HTML span tags

This article is mainly about how the HTML span tag can be wrapped, introducing the use and introduction of the seven attributes of span. Let's take a look at this article together.

The first thing we're going to introduce is how to make the span tag wrap, let's take a look at this example:

<span style= "Width:80%;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;color: #0066CC;" > This is anything that can be entered; this is anything you can enter; This is anything you can enter; This is anything you can enter; This is anything you can enter; This is anything you can enter; This is something you can enter; </span >

An example of an HTML span tag explains:

White-space: Control the layout of the page display text through the layout of the source code of the HTML document

Value: Normal | Pre | nowrap | Pre-wrap | Pre-line | Inherit

• Normal: No change normally (default processing.) text is automatically wrapped. If you arrive at the container boundary the content will go to the next line)

• Pre: Keep the HTML source space and line wrapping equal to the pre tag

• NoWrap: Force text in one line unless you encounter a BR wrap label

• Pre-wrap: Same as pre property, but will wrap automatically when encountering outside of container range

• Pre-line: Same as the pre property, but encountering contiguous spaces is considered a space

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

, the text that appears only occupies 80% of the page, and it is OK to use this setting to wrap the line automatically.

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

<p><span> This is just plain text </span> This is also plain text </p>

An example of an HTML span tag explains:

If you do not apply a style to a span, the text in the span element does not differ visually from the other text. However, the span element in the previous example still adds additional structure to the P element.

You can apply an ID or class attribute to a span, which increases the appropriate semantics and allows you to apply styles to spans.

You can apply class or ID attributes to the same <span> element, but it is more common to apply only one of them. The main difference between the two is that class is used for element groups (similar elements, or can be understood as a class of elements), whereas IDs are used to identify individual unique elements.

Tip: In fact, you may have noticed, for example, that "hint" uses a bold orange. Although there are many ways to achieve this effect, we do this by using the span element with hints and then applying class to the parent element of the span element, the P element, so that the corresponding style can be applied to the child element span of the class.

Html:

<p class= "Tip" ><span> tips:</span> here is php text </p>

Css:

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

Very simple: