css超出两行显示省略号鼠标上去显示全部

您可以使用CSS中的`text-overflow`属性来实现超出两行显示省略号，鼠标悬停时显示全部内容的效果。下面是一个示例：

/* 设置文本容器的最大高度和溢出隐藏 */
.container {
  max-height: 60px;
  overflow: hidden;
}

/* 设置文本溢出时显示省略号 */
.text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 鼠标悬停时显示全部内容 */
.container:hover .text {
  -webkit-line-clamp: initial; /* 显示全部行数 */
}

在上面的示例中，`.container`是文本容器的类名，`.text`是包含文本内容的元素的类名。您可以根据您的实际情况进行调整。

相关问题

css文字超出两行显示...，鼠标放上去

可以使用 CSS 属性 `text-overflow` 来实现文字超出两行显示，并在鼠标悬停时显示完整内容的效果。具体实现步骤如下：

1. 设置元素的宽度和高度，以及 `overflow: hidden` 属性来隐藏超出部分。
2. 使用 `white-space: nowrap` 属性来防止文字换行。
3. 设置 `text-overflow: ellipsis` 属性来在文字超出时显示省略号。
4. 在鼠标悬停时使用伪类选择器 `:hover` 来取消 `text-overflow` 属性，并设置 `white-space: normal` 属性来显示完整内容。

示例代码如下：

/* 设置元素宽度和高度，并隐藏超出部分 */
.example {
  width: 200px;
  height: 40px;
  overflow: hidden;
}

/* 防止文字换行，超出部分显示省略号 */
.example p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 鼠标悬停时取消省略号，并显示完整内容 */
.example p:hover {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

css文字超出两行显示...，使用el-tooltip鼠标放上去显示

可以使用 `el-tooltip` 组件来实现文字超出两行显示，并在鼠标悬停时使用 Tooltip 显示完整内容的效果。具体实现步骤如下：

1. 在需要显示的文本外面包裹一个容器元素，并设置容器的宽度和高度，以及 `overflow: hidden` 属性来隐藏超出部分。
2. 使用 `el-tooltip` 组件来包裹超出部分的文本，并设置 `content` 属性为完整内容。
3. 在 `el-tooltip` 组件内部使用 `span` 标签来显示省略号。
4. 在 `el-tooltip` 组件上使用 `effect` 属性来设置 Tooltip 显示的效果，例如 `light` 表示浅色、`dark` 表示深色。
5. 在 `el-tooltip` 组件上使用 `placement` 属性来设置 Tooltip 显示的位置，例如 `top` 表示上方、`bottom` 表示下方。

示例代码如下：

<template>
  <div class="example">
    <el-tooltip :content="fullText" effect="light" placement="top">
      <span>{{ displayText }}</span>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段超出两行的文字，用省略号显示',
    };
  },
  computed: {
    displayText() {
      return this.text.slice(0, 15) + '...';
    },
    fullText() {
      return this.text;
    },
  },
};
</script>

<style>
.example {
  width: 200px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 5px;
}
</style>

在上面的示例代码中，`<el-tooltip>` 组件的 `content` 属性绑定了完整的文本内容，`<span>` 标签内部显示了省略号，`<div>` 容器设置了宽度和高度，并使用了 `overflow: hidden` 属性来隐藏超出部分。在 `computed` 中，`displayText` 计算属性返回了用省略号显示的部分内容，`fullText` 计算属性返回了完整的文本内容。在 `el-tooltip` 组件上，使用了 `effect` 属性来设置 Tooltip 显示的效果，使用了 `placement` 属性来设置 Tooltip 显示的位置。