CSS implements that if the text content exceeds the set width, ellipses will be used to replace the remaining content (code)

The content of this article is about css implementation. If the text content exceeds the set width, ellipses will be used to replace the remaining content (code). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

# When css exceeds a certain width, use ellipsis... instead. How to achieve this? The following code:

.content .navleft .histiry>ul{
	width: 200px;
}
.content .navleft .histiry>ul li{
	margin-left: 10px;
	height: 20px;
	line-height: 20px;	
	color: #999;	
	font-size: 12px;
	cursor:pointer;/*鼠标放上变小手*/
	word-break:keep-all;/* 不换行 */   
    white-space:nowrap;/* 不换行 */  
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

Note: The last four sentences of code will change the default origin "•" in front of ul li. We can type a • ourselves using the input method, or use border-radius: 50% implemented.

Related recommendations:

CSS implementation of one line of text display with ellipses_html/css_WEB-ITnose

CSS implementation of title beyond Width ellipsis to represent_html/css_WEB-ITnose

The above is the detailed content of CSS implements that if the text content exceeds the set width, ellipses will be used to replace the remaining content (code). For more information, please follow other related articles on the PHP Chinese website!