CSS文本超出显示小数点

CSS中没有直接的属性可以让超出容器的文本显示为小数点，但是可以通过text-overflow属性配合其他属性来实现这种效果。text-overflow属性通常与overflow和white-space属性一起使用。

以下是实现文本超出部分显示小数点的CSS样式示例：

.ellipsis-text {
  overflow: hidden; /* 确保超出容器的文本被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示，避免换行 */
  text-overflow: ellipsis; /* 超出部分显示为省略号（...） */
}

HTML部分：

<div class="ellipsis-text">这是一段很长的文本，超出容器的部分将会被裁剪并显示为小数点。</div>

上述代码会使得超出div容器的文本部分显示为小数点。这里的“小数点”是指文本被overflow属性裁剪后的效果。如果要显示为真正的小数点省略符号（...），可以使用text-overflow: ellipsis。如果要显示为其他字符或符号，可以使用::after伪元素和content属性自定义。

自定义显示小数点的CSS示例：

.custom-dots::after {
  content: "…"; /* 这里可以替换为你想要的字符或符号 */
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: white; /* 背景色需要与文本容器颜色一致，以便在容器末尾看不到背景色的小数点 */
}

HTML部分：

<div class="custom-dots">这是一段很长的文本，超出容器的部分将会在末尾显示小数点。</div>

这段代码会在文本超出容器后显示为小数点。如果需要显示为其他字符或符号，只需在content属性中相应替换即可。