css文字竖向显示超出隐藏省略号

以下是CSS实现文字竖向显示超出隐藏省略号的方法：

/* 超出两行省略号 */
.ellipsis-two-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical;
}

/* 超出一行省略号 */
.ellipsis-one-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

在HTML中，可以将需要实现省略号的文本放在一个容器中，并为该容器添加相应的类名，例如：

<div class="ellipsis-two-line">
  这是需要竖向显示的文本，如果超出两行则会显示省略号。
</div>
<div class="ellipsis-one-line">
  这是需要竖向显示的文本，如果超出一行则会显示省略号。
</div>

相关问题

css 文字两行显示 超出部分省略号

您可以使用CSS的text-overflow属性来实现文字两行显示且超出部分省略号的效果。具体的实现方法如下：

1. 首先，需要设置要显示的文字所在的容器的宽度和高度，并且设置其overflow属性为hidden，这样超出容器的文字就会被隐藏。

2. 接着，设置容器内文字的样式，包括字体大小、行高、文字颜色等等。

3. 最后，在容器内嵌套一个span标签，设置其display为block，同时设置其宽度为100%、高度为两行文字的高度、white-space属性为nowrap，这样文字就会强制在一行内显示。

4. 然后，使用text-overflow属性来设置省略号的样式，例如：text-overflow: ellipsis;。

完整的CSS代码如下：

.container {
    width: 200px;
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
.container span {
    display: block;
    width: 100%;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

在HTML中，您只需要将要显示的文字放在容器的span标签中即可：

<div class="container">
    <span>这里是要显示的文字，可以是很长很长的一段话。如果超过两行，就会显示省略号。</span>
</div>

这样，就可以实现文字两行显示且超出部分省略号的效果了。

css 文字超出隐藏省略号

以下是两种CSS实现文字超出隐藏省略号的方法：

1. 单行显示省略号：

/* 强制文本一行内显示，超出部分隐藏，用省略号代替 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2. 多行显示省略号：

/* 超出两行甚至多行，隐藏文本并显示省略号 */
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: -o-ellipsis-lastline;text-overflow: ellipsis;