How to make html elements scale correctly, when dealing with long text

Asked Aug 17 '19 at 23:26

Active Aug 18 '19 at 00:43

Viewed 32 times

Long text without spaces makes html elements like div scale width in very unexpected way.

For example:

<div className='Test'>
        <div className='one'>
            11111
        </div>
        <div className='two'>
            22222222 222222222
        </div>
        <div className='three'>
            33333333333333333333333333333333333333333333333
        </div>
</div>


.one {
  width: 20px;
  border: solid green;
}

.two {
  border: solid purple;
}

.three {
  border: solid blue;
}

.Test {
  border: solid black;
}

Why this is happening and how we can fix it? By the way I meant mobile auto scaling, because desktop browsers do not scale width on it's own.

edited Aug 18 '19 at 00:43

asked Aug 17 '19 at 23:26

Gieted

Use display flex and then flex-wrap, may need to add a max-width as well. – Sabir Hossain Aug 17 '19 at 23:31
@SabirHossain Not related to my question. I asked for long undividable words, so wrap will make no difference. – Gieted Aug 17 '19 at 23:35
What do you mean by scale? – Sabir Hossain Aug 17 '19 at 23:38
Maybe I used a wrong word, sorry. I meant how to make html elements adapt theirs width to match screen width. – Gieted Aug 17 '19 at 23:42
You can cut it by overflow:hidden, that is maybe not what you want. Or scrollable by overflow: auto. Fitting the text by font-size just with javascript. – tom Aug 17 '19 at 23:46
@kmgt Mobile browsers already scales width correctly, the problem is only with its containers. – Gieted Aug 17 '19 at 23:57

How to make html elements scale correctly, when dealing with long text

0 Answers0