text-overflow ellipsis doesnt work in css

Question

what can i do to make it work with one or two lines both? can anyone help me? thank you in advance

<div class="ant-col" style="flex: 1 1 0%;flex-wrap: wrap;">
  <div class="fileManager-file-name" title="322333333333333333333344444444444444444333333333333333333.png" style="
    display: -webkit-box;
">322333333333333333333344444444444444444333333333333333333.png</div>
</div>

.fileManager-file-name {
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
    width: 50px;
    white-space: nowrap;
}

ninadepina · Accepted Answer · 2022-12-18 12:30:07Z

It is because of the display: -webkit-box;. What happens is that it actually does work, you just can't see it. The text is cut off after width: 50px; and then the ellipsis are put behind the first word. In this case you have a really long word which means the ellipsis won't show up in the 50px.

You can see the difference it the code snippet below, the first div has the original content and the second one also does but with spaces between every number. (I also removed the white-space: nowrap; btw)

.fileManager-file-name {
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
    width: 50px;
}

  <div class="ant-col" style="flex: 1 1 0%;flex-wrap: wrap;">
    <div class="fileManager-file-name" title="322333333333333333333344444444444444444333333333333333333.png" style="
      display: -webkit-box;">322333333333333333333344444444444444444333333333333333333.png</div>
  </div>

  <div class="ant-col" style="flex: 1 1 0%;flex-wrap: wrap;">
    <div class="fileManager-file-name" title="322333333333333333333344444444444444444333333333333333333.png" style="
    display: -webkit-box;">3 2 2 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 4 4 4 44444444444444333333333333333333.png</div>
  </div>

If you want to keep the long text without the spaces. You can do that by adding a space and a random character behind the text. e.g. <div>322333333333333333333344444444444444444333333333333333333.png 0</div>. And for some reason that does the job.. (Do make sure white-space: nowrap; is removed from the css file) — ninadepina, Commented Dec 18, 2022 at 12:35

Collectives™ on Stack Overflow

text-overflow ellipsis doesnt work in css

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related