文字过长用省略号显示且鼠标hover时展示完整内容

最新推荐文章于 2024-06-19 09:42:28 发布

啵啵怪_

最新推荐文章于 2024-06-19 09:42:28 发布

阅读量2.5k

点赞数

分类专栏： alpha 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_45609659/article/details/126608579

版权

alpha 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

单行内容过长，省略号加文字提示
在这里插入图片描述

使用content属性来决定hover时的提示信息。
由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；
三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<el-button size="small" type="text">上门表123</el-button>
<el-tooltip content="element.homeAttachmentName1234567890 element.homeAttachmentName1234567890" placement="top-start" >
	 <el-button class="home-attachment-name" size="small"> 
	 	element.homeAttachmentName1234567890 element.homeAttachmentName1234567890
	 </el-button>
</el-tooltip>

.home-attachment-name {
    width: 330px;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行内容过长，省略号加文字提示
在这里插入图片描述

   <li class="remark">
          <label>{{ $t('doorMailingForm.remark') }}</label>
		     <el-tooltip content="previewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.r         emarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remark" placement="top-end">
		            <span>previewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.r         emarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remarkpreviewData.remark</span>
          </el-tooltip>
        </li>

 span {
      width: 520px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }