Question

我有一些例子，其中一些字符串太长，我希望它们缩短。但是，当我将鼠标悬停在它上面时，我希望能够看到整个字符串。

.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>

我在网上找到的大多数方法都使用两个字符串，即用鼠标悬停的文本与用于工具提示的文本分开（如post here中所示）。但在我的情况下，我有相同的文字。对同一文本有两个条目似乎是多余的。

Answer 1

你不能只使用span的title属性吗???

＆＃13;

<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>

＆＃13;

如果您不想要重复文字，请使用CSS选择器，以便在范围内有标题时，请使用内容标题。然后只需删除带有标题的内容，如下所示：

＆＃13;

<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>

＆＃13;

Answer 2

当悬停时，使用attr作为伪元素内容扩展@Popmedic答案：

<span  title="This is my full name which should be shortend"></span>

CSS

span {
  position: relative;
  border: 1px solid pink;
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
span:before {
 content: attr(title);
}
span:hover {
  width: auto;
  border: 1px solid blue;
}

CodePen

Answer 3

让剩余的span通过overflow: visible;显示，如下所示：

.overview p span {
  overflow: hidden;
}

.overview p:hover > span {
  padding-bottom: 6px;
  overflow: visible;
}

示例：JSFiddle

您可能仍希望在span和em之间添加更多空格，因此文字不会涵盖em中的文字/数字，但这取决于您的设计。祝你好运！

如何使用css显示悬停工具提示使用相同的文本，该文本是带有省略号的短文？

3 个答案: