How to implement css font to stay on one line without wrapping

How to implement css fonts to remain on one line without wrapping: 1. Use the "word-break:keep-all;white-space:nowrap;" attribute to achieve text without wrapping; 2. In the table, set " word-break" attribute sets the text not to wrap.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommended: "css video tutorial"

How to set css fonts on the same line:

General The text does not wrap (applicable to inline and block):

.text-overflow {
    display:block;               /*内联对象需加*/
    width:31em;
    word-break:keep-all;       /* 不换行 */
    white-space:nowrap;       /* 不换行 */
    overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；
                              需与overflow:hidden;一起使用。*/
}

Set the text in the table to not wrap:

table{
    width:30em;
    table-layout:fixed;    /* 只有定义了表格的布局算法为fixed，
                           下面td的定义才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;             /* 不换行 */
    white-space:nowrap;            /* 不换行 */
    overflow:hidden;              /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;       /* 当对象内文本溢出时显示省略标记(...) ；
                                需与 overflow:hidden;一起使用。*/
}

The above code implements the part of the text that does not wrap:

word The -break:keep-all setting can only break lines at half-width spaces or hyphens.

white-space:nowrap style setting text will not wrap, the text will continue on the same line until the 0c6dc11e160d3b678d68754cc175188a tag is encountered.

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