How to achieve css td text without line wrapping

css How to implement td text without line wrapping: First open the corresponding css code; then set the "white-space:nowrap;" style for the table and td tags to prevent the text in the table from wrapping.

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

css table text non-wrapping setting

Many times during project development, we will encounter line wrapping problems caused by too much cell content, making the table appear 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>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><pre class='brush:php;toolbar:false;'>table {
    border : 1px solid red;
}
 
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}

html code:

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

Recommended: "css video tutorial"

The above is the detailed content of How to achieve css td text without line wrapping. For more information, please follow other related articles on the PHP Chinese website!