cocacrave cocacrave - 5 months ago 11
CSS Question

Text Overflow Ellipsis with Table

I have a layout that gets centered using class box-center. Now I want to add text-overflow ellipsis but it doesn't center anymore.

.box-center {
display: table;
table-layout: fixed;
margin: 0 auto;

.ellipsed {
display: table;
table-layout: fixed;
white-space: nowrap;
width: 100%;

span {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
}
}
}


I tried adding this as well but this doesn't text-overflow ellipsis.

.ellipsed {
white-space: nowrap;
width: 100%;

span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
}


HTML:

<div class="box-center">
<div class="ellipsed">
<span>Some text to be ellipsed</span>
</div>
</div>


Can someone help?

Answer

Whenever you want to use text-overlfow:ellipsis you need to define width of the element as you need to tell the element after what width it should hide and show ellipsis.

See this dummy example based on simple css. I have added just a dummy width and its working

.ellipsed {
  white-space: nowrap;
  width: 100%;
}

span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
}
<div class="box-center">
  <div class="ellipsed">
    <span>Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed </span>
  </div>
</div>