How can I get text to wrap to its minimum width to fill text box height?-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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>