text-overflow:elipsis in vertical-text

Aldahir Ruiz Valdez 0
Viewed 25

I am trying to create a text with two attributes that I don't know if they are compatible. 1.- It must be vertical. 2.- If it is too big for the content, you must put an ellipsis.

I have the text already vertical, but I think that the ellipsis does not work there

.cell{
    display: inline-flex;
    border: 1px solid gray;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.area .rating{
    writing-mode:vertical-rl;
    transform: rotate(180deg);
    align-items: left;
    justify-content: left;
    white-space: nowrap;
    text-overflow: ellipsis;    
}
<div class="cell area" id="be-area-info">
   <div class="rowTable">
    <div class="cell rating">Examen alcsf sdf asd</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating"><i class="fad fa-layer-plus"></i></div>
   </div>
 </div>

enter image description here

I need the Inline-flex to be maintained, because inline-block leaves spaces between the divs

javascript css html
1 Answers

You can achieve the two goals. I updated your styles.

.cell {
    border: 1px solid gray;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.area .rating {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
<div class="cell area" id="be-area-info">
  <div class="rowTable">
    <div class="cell rating">Examen alcsf sdf asd</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating"><i class="fad fa-layer-plus"></i></div>
  </div>
</div>

Azu0
Related