How to use white-space in HTML

white-space is a tag in HTML, so today we will give you some popular science on how to use this attribute and under what circumstances it can be used

white-space norma nowrap forces all text to be displayed in the same line, so that all text content is displayed in one row without wrapping.

Let the text not wrap automatically. No matter how much the CSS width is set, all text will be displayed in one line. Especially for the title list, we want to display only one title content per line, but sometimes the width is limited and the title text has too much width (width) and is limited, which will cause the text to wrap automatically. At this time, we can use the white-space style to display it in a row. No line breaks. Of course, in order to hide the excess text content, we can add a css overflow:hidden style.

white-space syntax:

white-space : normal nowrap

white-space parameters:

normal : Default processing method

nowrap: Force all text to be displayed on the same line until the text ends or the br tag object is encountered. It is recommended to use white-space:nowrap to force no line breaks.

white-space sets or retrieves the text display mode within the object. Usually we use it to force one line to display content

Usually we use white-space:nowrap to force the text content not to wrap, and display all the text content in one line within the object.

I set up 2 object boxes, and set one to force the text content to be displayed in the same row. The second setting forces peers to show, but uses the html br tag to observe the effect. For the white-space case application effect, I set the css width to 120px, the css height to 60px, and the css line-height line-height to 20px.

css code

<style> 
div{ width:120px; height:60px; line-height:20px} 
.div{ white-space:nowrap} 
</style>

2, html code snippet

<div class="div">内容将在一行内强制显示完整</div> 
<div class="div">内容使用br换行<br /> 
将会不被<br />换行显示</div>

Everyday, in order to display the text content in one line, even if the width is not enough, we cannot wrap the line. You can use the white-space style, but if you encounter the html br forced line break tag, whether you set white-space or not, it will be forced to line break by
.

I have introduced white-space for so long, I believe you must have understood it. Friends in need can save it. For more exciting information, please continue to pay attention to other updates on this site.

Related reading:

How to use label tags in html

DIV background image background Setting method

How to modify the HTML title tag element

The above is the detailed content of How to use white-space in HTML. For more information, please follow other related articles on the PHP Chinese website!