H3及其内容扩展

Question

我有一个内容满足的h3。

像

然后输入很多内容，就像

我唯一使用的CSS是：

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

我需要的是将h3扩展为内容保持相同的样式（ 像这样，文字位于中间，上方和下方都有一些witdh

Answer 1

您应该删除height: 40px并定义一个min-height。这样，该元素将可以根据您输入的文本自由地进行调整。

然后，如果您想将第二行的文本对齐到第一行的文本正下方（而不是节号的下方），则应该使用更大的左填充和一个负text-indent仅影响第一行

  

Codepen example

Answer 2

->输入较大的内容时，可以删除一行内容的高度或设置最小高度

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

您可以尝试通过“ vw” 设置font-size来调整页面大小并根据需要调整数字

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>