CSS : lineclamp truncating long word

Question

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


  
    12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF

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.

user_13970397 · Answer

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


  
    
      12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF

CSS : lineclamp truncating long word

1 Answers