angularjs 仅当可见文本以“...”结尾时才显示工具提示,

kninwzqo 于 5个月前发布在 Angular

关注(0)|答案(1)|浏览(47)

我有一个表，有5列和超过一千行。我只会谈论一列，并复制代码到其他人，如果有人在这里可以帮助我使它工作。根据这些列中的文本的长度，文本可以显示与“...”在每行的末尾。这就是为什么我添加了“文本溢出：省略号”在css中。我想要的是，tootlip（大家好）只出现在最后显示为“...”的文本中，因为它们太长了，无法容纳在列中。
html（这是我的表的五个列之一的代码）：

<ng-container matColumnDef="title">
  <th mat-header-cell *matHeaderCellDef class="table-header">
    Title
  </th>
  <td 
    pTooltip="HELLO everyone" 
    (click)="toggleSeeMore(element)" 
    mat-cell 
    *matCellDef="let element" 
    class="title-column-news"
  >
    <div [style]="styleTitle(element.showSeeMore)">{{ element.title }}</div> 
      <div *ngIf="element.showSeeMore" style="margin-top: 10px">
        <span>
          <div [style]="styleTitle(element.showSeeMore)">{{ element.summary }}
            <a 
              style="color:var(--limegreen); text-decoration: none;" 
              target="_blank" 
              [href]="element.file"
            >
              See more
            </a>
          </div>
        </span>   
      </div>
    </td>
  </ng-container>

字符串
css：

td {
  color: var(--textLightGrey);
  border-bottom: 1px solid var(--textLightGrey);
  padding: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

型

angularjs

来源：https://stackoverflow.com/questions/77529159/display-tooltip-only-when-visible-text-ends-with

1条答案

按热度按时间

gj3fmq9x1#

你可以看看这个link

div {
  line-height: 20px;
}

#data {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#data:hover {
  overflow: visible;
  white-space: normal;
  width: auto;
  position: absolute;
  background-color: #FFF;
}

#data:hover+div {
  margin-top: 20px;
}

<div>1: ONE</div>
<div id="data">2: Two Two

字符串

div {
  line-height: 20px;
}

#data {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#data:hover {
  overflow: visible;
  white-space: normal;
  width: auto;
  position: absolute;
  background-color: #FFF;
}

#data:hover+div {
  margin-top: 20px;
}

<div>1: ONE</div>
<div id="data">2: Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two </div>
<div>3: THREE</div>
<div>4: Four</div>

的数据
二二二

赞(0）回复(0）举报 5个月前

我来回答

angularjs 仅当可见文本以“...”结尾时才显示工具提示,

1条答案

相关问题

热门标签

最新问答