1

I have an element that contains only a text sentence, for example:

<p>Click here to see the Product Widget Name in action</p>

The text in the element will change according to the product page it is shown on.

The height of this element is 45px high, but the width variable. What I'm trying to do is to get the width to be as small as possible without the text overflowing out of the element. So I want the text to wrap as much as possible within the 45px height of the element, so the width is as small as possible.

However I can't seem to get this to work in any way in CSS. Below are some things I've tried, can add more elements to make this work if it is required.

p {
  height: 45px;
  font-size: 8pt;
  line-height: 1.15;
  border:1px solid black;
  
  width:1px;
  max-width:fit-content;
  min-width:min-content;
}
<p>Click here to see the Product Widget Name in action</p>

p {
  height: 45px;
  font-size: 8pt;
  line-height: 1.15;
  border:1px solid black;

  width:min-content;
  max-width:fit-content;
  min-width:min-content;
}
<p>Click here to see the Product Widget Name in action</p>

p {
  height: 45px;
  font-size: 8pt;
  line-height: 1.15;
  border:1px solid black;

  width:auto;
  max-width:min-content;
  min-width:fit-content;
}
<p>Click here to see the Product Widget Name in action</p>

I know I can do this in JS, but would rather avoid it if I can. If JS is the only way, would I have to use a trial/error way by looping through multiple widths until I hit the right balance?

Please let me know if there's a solution to this!

isherwood
  • 58,414
  • 16
  • 114
  • 157
AutoBaker
  • 919
  • 2
  • 15
  • 31

2 Answers2

0

If I've understood your question properly you don't have another way other than changing the font of your text depending on the width and height of your element. In this way you'll have fixed width and height sizes and only by changing the font size your text will fit in the element. Now if that's what you're looking for here's a perfect source to find the best solution that would work for you. Font scaling based on width of container

Hoda Shakourbin
  • 94
  • 1
  • 8
  • Thanks for replying, that's helpful. Ideally I want the font height and the element height to both be fixed, so that the text wraps to the maximum height of the element. – AutoBaker Oct 17 '22 at 14:57
  • @5Diraptor So it seems that I didn't understand your problem correctly. You want to have a fixed height and font size but a variable width size with the condition that the text fills element 's space right ? – Hoda Shakourbin Oct 18 '22 at 10:41
  • Yep, that's right – AutoBaker Oct 18 '22 at 13:21
0

I hope this can help you

p {
  width: 50px;          
  border: 2px solid black;      
  padding: 10px;      
  word-wrap: break-word;      
  font-size: 20px;    
}
<p> In this paragraph, there is a very long word:      
 iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>

u can add text-overflow: ellipsis; to hide the overlay if want to have max hight and make it look "nice"

p {
  text-overflow: ellipsis;
  height: 45px;
  width: 150px;          
  border: 2px solid black;      
  padding: 10px;      
  word-wrap: break-word; 
  overflow: hidden;
white-space: nowrap;     
  font-size: 20px;    
}
<p title="some info that user can see on hover is text is not readable"> In this paragraph, there is a very long word:      
 iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>
HashtagForgotName
  • 651
  • 1
  • 7
  • 23
  • Hello there, thanks for replying but you haven't actually addressed the question here - I'm afraid neither of your examples demonstrates what I was trying to do. With a fixed height div, I'm looking for the text to wrap over the full height of the div, and take up as little width as possible. – AutoBaker Oct 17 '22 at 14:53
  • So that the width of the div will vary according to the amount of text in it, but the text will always wrap to the full height of the container. – AutoBaker Oct 17 '22 at 14:53