CSS :线灯截短长字

Question

我有一个带有{ID} | {title}格式的标题，标题往往很长。我也希望这个标题保持在一行，所以我有这样的解决方案：

​

.wrapper {
  width: 100%;
  display: block;
}

.outer {
  overflow: hidden;
}

.inner {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
}

<div class="wrapper">
  <div class="outer">
    <span class="inner">12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF</span>
  </div>
</div>

​

问题是它缩短了整个标题，因为它是一个长字符串。我想知道是否可以将标题保持为一行，并使其只截断超出第一行的标题字符串的部分，例如：

12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FS...

我还没有找到一种方法来干净地使用CSS来完成这个任务。

Answer 1

若要防止文本包装，可以添加white-space: nowrap;，并通知用户可以添加text-overflow: ellipsis;的字符更多。

​

.wrapper {
  width: 100%;
  display: block;
}

.outer {
  overflow: hidden;
}

.inner {
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: red;
  overflow: hidden;
  max-width: 40vw;
}

<div class="wrapper">
  <div class="outer">
    <div class="inner">
      12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF
    </div>
  </div>
</div>

​