CSS : lineclamp truncating long word-CodePudding

I have a title with a format of {ID} | {title}, where the titles tend to be very long. I would also like this title to stay to one line, so I have a solution like so :

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

.outer {
  overflow: hidden;
}

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

<div >
  <div >
    <span >12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF</span>
  </div>
</div>

The issue with this is it shortens the entire title because it's a long string. I'm wondering if it's possible to keep the title as a single line and have it truncate only the part of the title string that is extending beyond the first line, for example:

12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FS...

I've not been able to find a way to cleanly do this with CSS.

CodePudding user response：

To prevent text wrapping you can add white-space: nowrap; and to inform user that there is more characters you can add 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 >
  <div >
    <div >
      12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF
    </div>
  </div>
</div>