css怎么实现超过指定长度省略，且鼠标悬浮显示全部名称

可以使用 CSS 的`text-overflow`属性和`white-space`属性来实现超过指定长度省略，并在鼠标悬浮时显示全部名称。

具体操作如下：

1. 设置`white-space`属性为`nowrap`，使文本不换行：

text-overflow: ellipsis;
white-space: nowrap;

2. 设置`text-overflow`属性为`ellipsis`，使超出指定长度的文本以省略号表示：

text-overflow: ellipsis;

3. 为元素添加`title`属性，将完整的文本内容赋值给`title`属性，实现鼠标悬浮时显示全部名称：

<div title="这是一段需要截断的文本，鼠标悬浮时会显示全部内容" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100px;">这是一段需要截断的文本，鼠标悬浮时会显示全部内容</div>

这个例子中，字符串"这是一段需要截断的文本，鼠标悬浮时会显示全部内容"会被截断成"这是一段需..."，并且在鼠标悬浮时会显示全部的字符串。

注意：这个方法只适用于单行文本的截断。如果需要截断多行文本，可以考虑使用`-webkit-line-clamp`属性或者`JS`来实现。

相关问题

前端怎么实现一串字符，超过指定长度显示三个点省略，且鼠标悬浮显示全部名称

这个功能可以通过 CSS 的 text-overflow 和 white-space 属性来实现。

text-overflow 属性用于指定当文本溢出容器时如何显示，可以设置为 ellipsis，表示用省略号来表示被修剪的文本。

white-space 属性用于指定如何处理元素中的空白符，可以设置为 nowrap，表示文本不换行。

具体实现方法如下：

1. 设置容器的宽度和 overflow 属性为 hidden，即超过容器宽度的部分被隐藏。

2. 设置文本的 white-space 属性为 nowrap，表示文本不换行。

3. 设置 text-overflow 属性为 ellipsis，表示用省略号来表示被修剪的文本。

4. 使用 title 属性为元素添加鼠标悬浮提示，提示内容为全部文本。

示例代码如下：

<style>
    .ellipsis {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="ellipsis" title="这是一段超长文本，鼠标悬浮可以查看全部内容">这是一段超长文本，超过宽度部分被省略。</div>

在实际开发中，可以根据需要自定义样式和长度限制。

el-table显示三行，超过部分省略，鼠标悬浮弹框全部显示

你可以使用 `tooltip` 属性来实现鼠标悬浮弹框全部显示，同时使用 CSS 的 `text-overflow` 属性来省略超过部分。具体实现步骤如下：

1. 在 `el-table-column` 上设置 `tooltip` 属性，值为 `true`，表示启用鼠标悬浮弹框功能。

<el-table-column prop="name" label="姓名" tooltip="true"></el-table-column>

2. 使用 CSS 的 `text-overflow` 属性来省略超过部分。在 `el-table-column` 上设置 `class-name` 属性，值为自定义的类名。

<el-table-column prop="name" label="姓名" tooltip="true" class-name="ellipsis"></el-table-column>

3. 在 CSS 中定义 `.ellipsis` 类，设置 `text-overflow` 属性为 `ellipsis`，表示超过部分省略。

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样设置后，当表格内容超过一定长度时，会自动省略超过部分，并在鼠标悬浮时弹出全部内容。