How to set text in html without wrapping

html Methods to set text without line breaks: 1. General text truncation, the code is [word-break:keep-all;white-space:nowrap;]; 2. Hide the excess content, the code is [overflow:hidden;].

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

html Method to set text without line wrapping:

General text truncation (applicable to inline and block):

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

For tables, define Different:

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

Related learning recommendations:html video tutorial

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