防止文本被背景填充切断

Question

我有一个带填充的标题：

然而，在较窄的屏幕宽度下，文本会被填充切断：

在这种情况下，＆＃34; y＆＃34;被填充（以及j，g，q，p等字母）切断。我该如何解决这个问题？

我尝试了text-overflow: ellipsis，但这并没有解决任何问题。

以下是jsfiddle

编辑以下是我正在寻找的更好的示例（使用我的照片编辑器创建示例）：

这里是＆＃34; y＆＃34;的底部。没有被切断

Answer 1

您可以从垂直方向增加行高：

h1 span {
  color: white;
  background-color: lightgreen;
  padding: 2px 12px;
  line-height:calc(1em + 4px);
}
h1 + h1 span {
  color: white;
  background-color: lightgreen;
  padding: 6px 12px;
line-height:normal;}
h1 {
  float:left;
  width:50%;
  background:gray;
  overflow:hidden;;
}

<h1>
  <span>my heading fixed my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading</span>
</h1>
<h1>
  <span>my heading bugs my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading my heading</span>
</h1>

Answer 2

让它显示内联块：

h1 span {
  color: white;
  background-color: lightgreen;
  padding: 6px 12px;
  display:inline-block;
}

<h1>
  <span>my heading</span>
</h1>