H3 that extends with the content of it

user_7236478 0
Viewed 155

I have a h3 with content.

like enter image description here

and then i type to much content it will be like

enter image description here

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

css html
3 Answers

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

user_10988510

-> 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>

user_56944690

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>

user_76262770
Related