css文字缩回li右边 |css div上下间距

li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 200px;
}
li::after {
content: "...";
display: inline-block;
width: 10px;
margin-left: 5px;
}

如上代码所示，大家首先将li元素设为display: inline-block;，再设置文本不换行white-space: nowrap;，并隐藏溢出部分overflow: hidden;，开启文本溢出显示省略号text-overflow: ellipsis;，最大显示宽度为200pxmax-width: 200px;。

然后通过伪元素::after添加省略号content: "...";，并将其设为display: inline-block;，使其与文本在同一行内显示。再设置其宽度width: 10px;，留出空白。最后设置其左边距margin-left: 5px;，使其与文本之间有一定距离，从而达到效果。

这样大家就成功实现了将文本缩回到容器左侧，同时在其右侧显示省略号的效果。