How to disable automatic line wrapping in html

Methods to disable automatic line wrapping in html: 1. Add the "display:inline" style to the html element and set the element as an inline element; 2. Add the "float:left" style to the html element to make the element out of the document Stream, float to display on the same line.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

demo：

<div>性别：
<input id="sex0" name="sex" type="radio" value="0" checked="checked"/>男
<input id="sex1" name="sex" type="radio" value="1"/>女
</div>

How to display two inputs on the same line:

1. Use the style display:inline

<style>
.c{
    display:inline;
}
</style>
<div>性别：
<input class="c" id="sex0" name="sex" type="radio" value="0" checked="checked"/>男
<input class="c" id="sex1" name="sex" type="radio" value="1"/>女
</div>

display:inline is used to set the object to be displayed as an inline element. Inline is the default value for inline objects (ps: inline objects do not automatically generate line breaks. element, such as span) Use this value to delete rows from the object.

If both inputs are inline, they are on the same line. For example, the divs we generally use are block-level elements, and the default display attribute is block. However, if the div's display is set to inline, multiple divs can be displayed in one line.

2. Use the style float:left (not recommended)

<style>
.f{
    float:left;
}
</style>
<div class="f">性别：
<p class="f"><input id="sex0"  class="f"  name="sex" type="radio" value="0" checked="checked"/>男</p>
<p class="f"><input id="sex1"  class="f"  name="sex" type="radio" value="1"/>女</p>
</div>

It is troublesome to use with multiple elements, and may cause confusion in the position of other elements. .

Other usage for plain text

1. Tag

<nobr> 12345456<nobr>

2. Tag

<div nowrap>123123123</div>

3. Tag

<pre class="brush:php;toolbar:false">23423423

4. Style

c{ 
    white-space:nowrap; 
}

[Recommended learning: Html5 tutorial】

The above is the detailed content of How to disable automatic line wrapping in html. For more information, please follow other related articles on the PHP Chinese website!