Use css to solve the problem of replacing the number of characters in the title with ellipsis

The number of words in the title exceeds the scene:

I can’t let it wrap in the leftmost column, what should I do?

Step 1: Hide the excess content when the content exceeds the width

Step 2:Display omit when the text within the object overflows Mark (...)

The following is the solution:

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

[Related recommendations]

1. Use ellipses when the number of words displayed in html text control exceeds Method

2. CSS method to solve the problem that the number of text words exceeds the display of ellipsis...(single line, multi-line text)

3. Free online css Video tutorial

The above is the detailed content of Use css to solve the problem of replacing the number of characters in the title with ellipsis. For more information, please follow other related articles on the PHP Chinese website!