How to prevent cells in css table from wrapping

How to realize that the cells of the css table do not wrap: 1. Open the corresponding HTML file; 2. View the contents of the table table and td tags; 3. Set the css attribute to "white" for the table table and td tags -space:nowrap;" will prevent the text in the table from wrapping.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to prevent cells in css table from wrapping ?

css table text non-line wrapping setting:

Many times during project development, we will encounter line wrapping problems caused by too much cell content. It makes the table look very ugly. Let's take a look at how to use css to set the text in the table not to wrap.

CSS can prevent the text in the table from wrapping by setting the white-space:nowrap; style for the table and td tags.

The code is as follows:

/*让单元格内容过多时也不换行*/
#datasTablediv table td{
white-space: nowrap;
}

The white-space attribute sets how to handle whitespace within the element.

This attribute declares how to handle whitespace characters in elements during the layout process. The values ​​pre-wrap and pre-line are new in CSS 2.1.

Attribute value:

normal Default. White space is ignored by the browser.

pre White space will be preserved by the browser. It behaves like the

 tag in html. </p><p>nowrap The text will not wrap. The text will continue on the same line until the <br> tag is encountered. </p><p>pre-wrap Preserves whitespace sequences, but wraps normally. </p><p>pre-line merges whitespace sequences but retains newlines. </p><p>inherit specifies that the value of the white-space attribute should be inherited from the parent element. </p><p>Example:</p><p>css code:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table {
    border : 1px solid red;
}
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}

Copy after login

html code:

<table>
    <tr><td>此处文本超过设定的宽度</td></tr>
</table>

Recommended learning: "css video tutorial"

The above is the detailed content of How to prevent cells in css table from wrapping. For more information, please follow other related articles on the PHP Chinese website!