防止文本被背景填充截断

Question

我有一个带填充的标题：

但是在较窄的屏幕宽度上，文本会被填充截断：

在这种情况下，“y”的底部会被填充（以及 j、g、q、p 等字母）切断。我该如何解决这个问题？

我试过text-overflow: ellipsis，但没有解决任何问题。

这里是jsfiddle

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

这里“y”的底部没有被切断

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>