Question

我有一个模块：

＆＃13;

no-redeclare

＆＃13;

.container {
  width: 250px;
  height: 50px;
  background: #fffff3;
}
.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

＆＃13;

哪个应呈现为：

一些客户名称：1.7米高

我希望这会截断，以便如果名称太长，它将如下所示：

有些长名......：1.7米高

我尝试过使用上面的truncate类，但看起来像这样：

一些loooooooooooong名字......

用户高度偏离屏幕。我该怎么做才能纠正这个问题？

Answer 1

您需要为name元素设置省略号，要使其正常工作，您还需要一个固定的width，因为它是<span>您还需要更改display ：

＆＃13;

.container {
  width: 250px;
  height: 50px;
  background: #fffff3;
}
.truncate {
  display: inline-block;
  vertical-align:middle;
  width: 120px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

＆＃13;

<div class="container">
  <p>
    <span class="truncate">Some Looooongggg nameee</span>
    :
    <span>1.7 </span>
    M Tall
  </p>
</div>

＆＃13;

Answer 2

尝试使用flexbox布局，并仅在第一个跨度上设置省略号。它还支持跨距和纯文本的动态长度。

.truncate {
  display: flex;
  align-items: center; /* vertically center text */
  white-space: nowrap;
  width: 250px;
  height: 50px;
  padding: 0 8px 0 4px;
  background: gold;
}
.truncate span {
  min-width: 0;
  padding: 0 4px;
}
.truncate span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1; /* to take as much space as available */
}

<p class="truncate">
  <span>Looooooooooooooooooooooong name</span> :
  <span>1.7m</span> M Tall
</p>

使用＆＃34;文本溢出截断文本：省略号＆＃34;

2 个答案: