show-overflow-tooltip 如何两行展示
时间: 2023-07-17 11:09:45 浏览: 129
要在 `show-overflow-tooltip` 中展示两行内容,你可以使用 CSS 的 `text-overflow` 属性来实现。首先,你需要为要展示的内容的父元素设置一个固定的高度,然后使用 `overflow: hidden` 来隐藏超出父元素高度的内容。接下来,使用 `text-overflow: ellipsis` 来在内容溢出时显示省略号。最后,使用 `white-space: nowrap` 来防止内容换行。
以下是一个示例代码:
```html
<style>
.tooltip {
height: 2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="tooltip">
<!-- 这里放你要展示的内容 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
```
在上面的示例中,`.tooltip` 类被应用于要展示的内容的父元素。你可以根据需要调整 `.tooltip` 类的样式。
相关问题
show-overflow-tooltip不显示tooltip
show-overflow-tooltip属性用于在Element-UI的el-table表格中设置是否显示tooltip文本提示内容。根据提供的引用内容,show-overflow-tooltip属性不显示tooltip的原因可能有以下几种情况:
1. 属性替换问题:可能是show-overflow-tooltip属性的写法不正确。尝试将`:show-overflow-tooltip="true"`替换为`show-overflow-tooltip`。
2. 嵌套问题:show-overflow-tooltip属性需要在el-table-column标签内部嵌套使用才能生效。确保show-overflow-tooltip属性位于el-table-column标签内,并且在标签内部嵌套了其他标签。
以下是一个示例代码,展示如何正确使用show-overflow-tooltip属性:
```html
<el-table>
<el-table-column prop="cooperateStatus" label="状态" min-width="110" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status == 0" show-overflow-tooltip>启用</span>
</template>
</el-table-column>
</el-table>
```
请注意,示例代码中的show-overflow-tooltip属性位于span标签上,并且span标签是在el-table-column标签内部嵌套的。
show-overflow-tooltip 两行
show-overflow-tooltip属性可以实现当文本超出一行时用省略号替代,并在鼠标移入时显示全部内容的需求。但是如果想要实现文本超出两行的需求,这个属性是无法完成的。\[3\]如果你想要实现文本超出两行时隐藏多余文本,并在鼠标移入时显示全部内容,可以使用自定义的el-popover组件,并设置相应的样式。\[2\]你可以通过设置类名为set-content的样式,将表格内容设置为超出两行时显示省略号。然后在el-popover组件中,将popover内容设置为固定宽度,并使用类名为set-popper的样式来控制popover的宽度。这样当鼠标移入时,popover会显示全部内容。
#### 引用[.reference_title]
- *1* *3* [element-UI table文字超出两行,隐藏多余文字,移入显示tips](https://blog.csdn.net/qq_42533735/article/details/107057038)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [element ui table show-overflow-tooltip自定义样式](https://blog.csdn.net/weixin_42254016/article/details/126744506)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]