How to implement html display without line breaks-Front-end Q&A-php.cn

How to implement html display without line breaks

PHPz

Release： 2023-04-21 14:38:23

Original

4009 people have browsed it

HTML Display without line wrapping

In HTML, text wraps automatically by default. It will wrap automatically when it encounters the edge of the browser window or the set width. But sometimes we want the text not to wrap. How? What to do?

The following are several methods to achieve display without line breaks:

Use the tag

tag is in HTML Non-standard tag, which prevents text from being automatically wrapped.

For example:

<nobr>这是一段不换行的文字</nobr>

Copy after login

The effect displayed in the browser is: this is a piece of text without line breaks.

However, it should be noted that the tag has been deprecated in HTML5 and is no longer recommended.

Use the white-space property of CSS

The white-space property in CSS can control how whitespace characters inside the element are displayed. It has several common values:

normal: normal line wrapping rules.
nowrap: Text should not wrap unless the <br> tag is encountered.
pre: Preserve whitespace sequences, but wrap normally (only when a <br> tag or an explicitly specified newline character is encountered).
pre-wrap: Keep the whitespace sequence, but wrap lines normally.
pre-line: Combine whitespace sequences, but wrap normally (only when <br> tags or explicitly specified newlines are encountered).

For example:

<p style="white-space:nowrap;">这是一段不换行的文字</p>

Copy after login

The above code can make the text display without wrapping.

If you want the text contained in an element not to wrap, you can add white-space:nowrap; to the style of this element.

Use the text-overflow property of CSS

The text-overflow property in CSS can specify what should be done when text overflows the container. It has the following common values:

clip: truncate the text and do not display the overflow part.
ellipsis: Replace the overflow part with an ellipsis.
string: Replace the overflow part with the specified string.

For example:

<p style="width:100px;overflow:hidden;text-overflow:ellipsis;">这是一段会溢出的文字，被省略号替代。</p>

Copy after login

The above code sets the container width of the text to 100px, and the overflowing part is replaced by ellipses so that the text will not wrap.

It should be noted that the text-overflow attribute will only take effect when white-space is set to nowrap or pre-wrap.

Summary

The above three methods can achieve non-line wrapping display in HTML, but it is recommended to use the white-space property of CSS because it is compliant with the standard and can achieve non-line wrapping. , can also control the wrapping of text. You should also try to avoid using the tag, as it has been deprecated.

The above is the detailed content of How to implement html display without line breaks. For more information, please follow other related articles on the PHP Chinese website!