How to make text fit all div's width?

Question

There is a block on my site, where user's work price is written. All users have different price of work, so if text length is more than 5 letters, the text wont fit the parent block.

I'd like to solve this problem with no javascript code if possible

Can you provide a working example of the problem? (HTML and CSS) — metaDesign, Jul 09 '19 at 13:10
Yes, please show the code. As-is, if you simply don't know what the width of the text will be, then style the box to fit whatever the maximum could be. — JesseEarley, Jul 09 '19 at 13:12
yes, sure here it is https://codepen.io/CitizenOne/pen/bPOpBr there is no font and images, but that's not important for solving the problem — Jack Shcherbakov, Jul 09 '19 at 13:13
What is the parent display? If it's a flex box the children will grow automatically, then you can apply flex-wrap to the parent, just in case the children try to grow out of width — DAVID AJAYI, Jul 09 '19 at 13:16
I have edited the codepen - https://codepen.io/mightyteja/pen/mZaPBO — mightyteja, Jul 09 '19 at 13:31

score 0 · Answer 1 · answered Jul 09 '19 at 13:15

0

I think your only two options are adjusting the with of the "box" or the font size. I would try to use display: inline; or display: inline-block on your "box" and not setting the width explicitly. With that it should always match the with of the text.

.box {
  display: inline;
  background: #cccccc;
  margin: 5px;
  padding: 10px;
}

<div class="box">
 100 $
</div>
<div class="box">
 1000 $
</div>
<div class="box">
 1000 $
</div>

answered Jul 09 '19 at 13:15

Janis Jansen

996
1
16
36

I already thought about this. But that's the website design would disagree with this solution. Here is the scrin: https://ibb.co/6b7NvTG – Jack Shcherbakov Jul 09 '19 at 13:18
I mean these blocks should have fixed width – Jack Shcherbakov Jul 09 '19 at 13:20
If you need a fixed with, you could try looking at this answer (https://stackoverflow.com/a/45863608/5254957), which suggests calculating the font size based on the width and height of the containing div like this `font-size: calc(4vw + 4vh + 2vmin);` – Janis Jansen Jul 09 '19 at 13:21
this will work only if parent element is html or parent's width and height equal to the browser width and height – Jack Shcherbakov Jul 09 '19 at 13:25

Rounin · Answer 2 · 2019-07-09T13:31:00.827

You have four options:

Make all grey blocks longer
Give each grey block a dynamic width
Make all the text smaller
Give each text a dynamic font-size

Options 1) and 3) have the advantage of giving your page a uniform appearance.

Options 2) and 4) have the advantage of only altering the appearance of a grey block (and the text it contains) when necessary.

If you declare display: inline-block for a div and do not explicitly set a width for that div, then it will have an implicit width based on its content. See below for an example.

Working Example using dynamic widths:

div {
position: relative;
display: inline-block;
margin: 12px 6px;
padding: 12px;
font-size: 24px;
text-align: center;
color: rgb(0, 127, 0);
background-color: rgb(227, 227, 227);
border-radius: 6px;
}

<div>3000₽</div>
<div>300000₽</div>
<div>300000000₽</div>

score -1 · Answer 3 · answered Jul 09 '19 at 13:16

-1

Without using JS to query for width, then your only option is to change the size of the box, or change the size of the text.

answered Jul 09 '19 at 13:16

JesseEarley

1,036
9
20

How to make text fit all div's width?

3 Answers3