多行标题文本选中时部分字符底部被遮挡，如何不修改行高解决？

• 核心思路是在不改变元素整体高度（不修改行高）的前提下，给文本底部预留足够空间容纳j、g、y这类带下沉的字符，推荐用内边距+负外边距的组合实现：

  .multi-line-heading {
    line-height: 1.2; /* 保留你原本设置的行高值 */
    padding-bottom: 0.2em; /* 给下沉字符留出空间，数值可根据实际字体调整 */
    margin-bottom: -0.2em; /* 负外边距抵消内边距，保证元素整体高度与原布局一致 */
    box-sizing: border-box; /* 确保内边距不会额外撑开元素宽度 */
  }
  

• 原理：padding-bottom给文本底部增加了内部空间，避免选中时容器边缘或高亮背景遮挡下沉字符；margin-bottom: -0.2em抵消了内边距带来的高度增量，完全保留原有的行高和布局尺寸。
• 若问题仅出现在选中高亮状态，也可单独调整选中样式（注意部分浏览器对::selection的样式支持有限）：

  .multi-line-heading::selection {
    background-color: #your-highlight-color;
    padding-bottom: 0.1em; /* 给选中背景底部预留空间 */
  }
  

内容的提问来源于stack exchange，提问作者Jeuwert