Html Question posted in
Some basic documentation can be found here.

Html – text-overflow ellipsis doesnt with symbol !!! when using with webkit

i have a css as below

div.b {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  line-height: 16px;
  white-space: normal;
}

with the text

no-webkit-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

then text-overflow: ellipsis will not work as expected if using display: -webkit-box;

it works perfect other if the text doesn’t include symbol like !!!!!!!!!!!!!!!!!!!!!!!
or remove display: -webkit-box;. but i want to keep display: -webkit-box; because i need display 2 lines which is required display: -webkit-box;
any solution will be appreciated!

here is code in the jsfiddle.
https://jsfiddle.net/thanhtungka91/gvbchao1/

Tags:

3

Answers


  1. 0

    add this style to your code.

    line-break: anywhere;

    Login or Signup to reply.
  2. 0

    Solution for your issue is pretty simple and straight forward add word-break: break-word to .b that’s it.

    div.b {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    line-height: 16px;
    white-space: normal;
}

  div.a {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    line-height: 16px;
    white-space: normal;
}
    <h2>text-overflow: clip (default):</h2>
<div class="a">no-webkit-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>

<h2>text-overflow: ellipsis:</h2>
<div class="b">H１２６!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
    Login or Signup to reply.
  3. 0
    1. white-space: nowrap: This was removed because -webkit-line-clamp handles the multiline aspect.
    2. white-space: normal: This is implicitly handled by -webkit-line-clamp.
    3. overflow: hidden: Ensures that overflowing text is hidden.
    4. text-overflow: ellipsis: This works with -webkit-line-clamp to add the ellipsis.
    5. word-break: break-word: This breaks words at the boundaries to prevent overflowing due to long strings with special characters.

    This configuration ensures that the text will be correctly clamped to two lines with an ellipsis, even when it includes special characters like exclamation marks.

    div.b {
  width: 50px;
  border: 1px solid #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 16px;
}
    <div class="b">
  no-webkit-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search