HTML学习记录

HTML中同一排文字，超出部分显示省略号，如何实现？

要在HTML中实现文本同排并且超出部分显示为省略号，可以使用CSS的text-overflow属性结合white-space和overflow属性。以下是一个简单的例子：

HTML:

<div class="text-container">
  这是一段很长很长的文本，需要同排显示并且超出部分用省略号表示。
</div>

CSS:

.text-container {
  width: 200px;   /* 定义容器宽度 */
  white-space: nowrap;   /* 保持文本在一行内显示 */
  overflow: hidden;   /* 隐藏超出容器的部分 */
  text-overflow: ellipsis;   /* 超出部分显示为省略号 */
}

在上述代码中，.text-container 类定义了一个容器，该容器的宽度被设置为200px。

white-space: nowrap 确保文本不会换行，overflow: hidden 隐藏了超出容器宽度的文本，而text-overflow: ellipsis 将超出的文本部分替换为省略号。