html - 如何使用 css 在悬停工具提示上显示使用省略号缩短的相同文本?
问题描述
我有一些字符串太长的例子,我希望它们被缩短。但是,当我将鼠标悬停在它上面时,我希望能够看到整个字符串。
.don_single_donatori {
width: 250px;
min-height: 310px;
}
.overview span {
text-overflow: ellipsis;
width: 100px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
}
.overview em {
font-style: normal;
color: #000;
float: right;
}
<div class="don_single_donatori">
<div class="viewport">
<div class="overview">
<p><span>This is my full name which should be shortend</span><em>2.000,00 EUR</em></p>
<p><span>Anonymous</span><em>2.000,00 EUR</em></p>
<p><span>Anonymous</span><em>500,00 EUR</em></p>
<p><span>This is another long name that needs shortening</span><em>2.000,00 EUR</em></p>
<p>Anonymous<em>2.000,00 EUR</em></p>
</div>
我在网上找到的大多数方法都使用两个字符串,即您用鼠标悬停的文本与您用于工具提示的文本是分开的(就像这里的帖子一样)。但就我而言,我有相同的文字。同一文本有两个条目似乎是多余的。
解决方案
不能只用span的title属性???
<style>
.don_single_donatori {
width: 250px;
min-height: 310px;
}
.overview span {
text-overflow: ellipsis;
width: 100px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
}
.overview em {
font-style: normal;
color: #000;
float: right;
}
</style>
<div class="don_single_donatori">
<div class="viewport">
<div class="overview">
<p><span title="This is my full name which should be shortend">
This is my full name which should be shortend
</span><em>2.000,00 EUR</em></p>
<p><span>Anonymous</span><em>2.000,00 EUR</em></p>
<p><span>Anonymous</span><em>500,00 EUR</em></p>
<p><span title="This is another long name that needs shortening">
This is another long name that needs shortening
</span><em>2.000,00 EUR</em></p>
<p>Anonymous<em>2.000,00 EUR</em></p>
</div>
</div>
</div>
如果您不想重复文本,请使用 CSS 选择器,以便如果跨度有标题,则使用标题作为内容。然后只需删除带有标题的 spans 中的内容,如下所示:
<style>
.don_single_donatori {
width: 250px;
min-height: 310px;
}
.overview span {
text-overflow: ellipsis;
width: 100px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
}
.overview em {
font-style: normal;
color: #000;
float: right;
}
span[title]::before {
content: attr(title);
}
</style>
<!-- ... -->
<div class="don_single_donatori">
<div class="viewport">
<div class="overview">
<p><span title="This is my full name which should be shortend">
</span><em>2.000,00 EUR</em></p>
<p><span>Anonymous</span><em>2.000,00 EUR</em></p>
<p><span>Anonymous</span><em>500,00 EUR</em></p>
<p><span title="This is another long name that needs shortening">
</span><em>2.000,00 EUR</em></p>
<p>Anonymous<em>2.000,00 EUR</em></p>
</div>
</div>
</div>
推荐阅读
- python - 如何获取嵌套div的所有值
- firebase - 如何通过其 id 从 firebase 实时数据库获取项目详细信息
- java - 如何向 Maven 依赖项添加许可证?
- memory - 关于Kafka中的内存消耗
- apache - 使用 Apache 反向代理的 Ratchet websocket 没有响应
- java - 使用不同帐户的 Google 登录在应用程序中崩溃
- laravel - 发送电子邮件并以 laravel 形式获得回复
- python - 如何打破while循环
- performance - 为什么动画代码和下一个动画帧之间有这么长的时间?
- regex - 两位数下一个点两位数下一个点两位数两个字母在单行文本字段中使用正则表达式