H3 that extends with the content of it

Question

I have a h3 with content.

like

and then i type to much content it will be like

the only css what i use is:

color: rgb(255, 255, 255);
font-size: 16px;
height: 40px;
line-height: 16px;
padding-left: 20px;
padding-top: 14px;
background-color: rgba(158, 179, 195);

what i need is that the h3 would extend wih the content en hold the same style( like that the text is in the center with some witdh above and under

Answer 1

you should remove the height: 40px and define a min-height instead. Doing so the element will be free to adapt itself according to the text you entered.

Then, if you want to align the text of the second row just below the text of the first row (and not under the section number) you should play with a greater left padding and a negative text-indent that will affect the first line only

Codepen example

Answer 2

-> You can remove height or set min-height for one line content when enter larger content

 h3 { color: rgb(255, 255, 255); font-size: 16px; min-height: 20px; line-height: 20px; padding-left: 20px; padding: 14px; background-color: rgba(158, 179, 195); } 

 <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing.</h3> <h3>Lorem Ipsum is simply dummy text of the printing.</h3> 

Answer 3

You could try setting font-size with "vw" resize the page and adjust the figure if needed

 h3 { color: rgb(255, 255, 255); font-size: 2vw; line-height: 16px; padding-left: 20px; padding-top: 14px; background-color: rgba(158, 179, 195); } 

 <h3>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3> <h3>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3> <h3>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>