[分享]css单行省略省略号下对齐

CSS中的单行省略和省略号下对齐都是在文本中常见的样式效果，可以通过CSS来实现。具体实现方法如下：

.my-text {
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*使用省略号*/
  overflow: hidden; /*超出部分隐藏*/
  display: inline-block; /*使其能够设置宽度*/
  width: 200px; /*设置宽度*/
  vertical-align: bottom; /*让省略号下对齐*/
} 

使用white-space属性设置为nowrap可以禁止文本换行。text-overflow属性使用ellipsis可以让文本超出部分使用省略号代替。overflow属性设置为hidden可以让超出部分隐藏。display属性设置为inline-block可以让元素能够设置宽度，并使其在一行中显示。

最后，需要设置vertical-align为bottom，这样省略号就能够对齐在文字下方了。

<p class="my-text">这是一段超出宽度的文本，需要使用省略号代替。</p> 

在HTML中，只需要在相应元素添加class为my-text即可使用此样式效果。

需要注意的是，以上样式只适用于单行文本。如果需要多行文本使用省略号代替，可以考虑使用JavaScript等其他方法实现。