How to fix text overflow from a flex box

Question

I am working with table. height of the row and width of column can be changed (configurable). every time If height/width changes , text within the cell should be vertically/horizontally centered every time .

I have a working code with css for a cell:

{
  display: flex,
  align-items: center  // vertical alignment
  justify-content: center // horizontal align
}

The problem here is ,for the cell value 90.45678423 now If i minimize column width. then its looking like that (pic)left part getting truncated

I don't want left part of the text truncate on column Resize..and even with minimun width it shouldleft part of value shpuld be there be like .

I have achive this behavior by using css with display block: but problem with this css is , I don't have line height access at this Js code and failed to achieve vertical alignment at middle if user change row height..

{
  text-align : center // horizontal align
  vertical-align : 'middle' // verical align
  line-height : ? 
}

If I understand correctly you want to center the text when there is space around and align it to the left when the text is bigger? — ludwiguer, Jul 20 '20 at 19:09

score 0 · Answer 1 · answered Jul 20 '20 at 19:21

If you want to center the text if it is smaller than the container and align it to the left and overflow it when the text is bigger than the container, you can use justify-content: safe center;

{
 display : flex;
 align-items : center;
 justify-content : safe center;
}

How to fix text overflow from a flex box

1 Answers1