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>
I need the Inline-flex to be maintained, because inline-block leaves spaces between the divs
Via Active questions tagged javascript - Stack Overflow https://ift.tt/arSZLvq
Comments
Post a Comment