Home  >  Article  >  Web Front-end  >  How to achieve css cell display without wrapping

How to achieve css cell display without wrapping

藏色散人
藏色散人Original
2021-02-02 10:13:092634browse

How to implement css cell display without wrapping: first open the corresponding code file; then add the attribute to the cell as "table td{white-space: nowrap;}" to prevent the td cell from wrapping show.

How to achieve css cell display without wrapping

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

Many times during project development, we will encounter line wrapping problems caused by too much cell content, making the table look very ugly.

How to prevent td cells from wrapping in css?

To prevent cells from wrapping, you can use the white-space attribute. The white-space attribute sets how to handle blank spaces within the element.

When its value is nowrap, the text will not wrap and will continue on the same line until the
tag is encountered.

The code is as follows:

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

Okay, let’s take a look at the effect

How to achieve css cell display without wrapping

This is the unprocessed effect:

How to achieve css cell display without wrapping

Recommended: "css video tutorial"

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn