如何停止行之间重叠的多行文本的透明背景? [英] How can I stop the transparent background of multiline text overlapping between lines?

问题描述

我遇到的问题是我的内联<span>包含多行文本，背景透明.尽管具有默认的行高，但文本的背景会重叠，导致背景覆盖到其上的较暗的水平行.

I'm facing an issue where I have an inline <span> containing multiline text, with a transparent background. Despite having a default line-height, the background on the text overlaps, causing darker, horizontal rows where the background is overlaid onto itself.

JsFiddle演示了此问题.

HTML:

<h1>
    <span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span> 
</h1>

CSS:

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: 1;
    font-size: 30px;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    display: inline;
}
h1 span {
    position: relative;
}

解决方案要求

1. 背景色必须符合文本的形状；因此将span设置为display:inline-block并不是可行的解决方案.
2. 设置固定的line-height(或padding)不是最佳的答案，因为确切的字体渲染在浏览器和用户设置之间会发生变化.例如，在Chrome中完美设置line-height会在Firefox中产生不完美的结果.
3. 文本必须是动态的和语义的.解决方案不能涉及为客户端在服务器上呈现文本的图像表示形式.
4. 最好允许添加或删除任意padding，以减少或增加文本和背景边缘之间的空间.
5. JavaScript可能还不错.我在这里使用Angular 2，因此与它们很好地集成在一起的答案甚至更好.

1. The background color must conform to the shape of the text; so setting the span to display:inline-block is not a workable solution.
2. Setting a fixed line-height (or padding) is not an optimal answer as the exact font rendering changes between browsers, and user's settings. Setting the line-height perfectly in Chrome will product an imperfect result in Firefox, for example.
3. The text must be dynamic and semantic. A solution cannot involve rendering an image representation of the text on the server for the client.
4. Preferably allows for arbitrary padding to be added or removed to reduce or increase the space between the text and the edge of the background.
5. Javascript could be fine. I'm using Angular 2 here, so answers which integrate nicely with that are even better.

推荐答案

行高将接受无"值，因此您可以设置该值，并且它可以工作(如果使用display:block)，但是(至少在chrome中， Safari和ff(在Mac上为ff)，任何内联代码之间的行间距为1px.因此，在下面的解决方案中，我只是在跨度中添加了1px的填充顶部以调整该间隙.我有点不客气，但是可以完成工作.显然，您将需要进行更多的浏览器测试.通过chrome和ff的浏览器缩放，它的缩放比例相当不错，但在野生动物园中以非常大的缩放比例可以得到些许补偿.

Line height will accept a 'none' value, so you can set that and it works (if it's display:block), however (at least in chrome, safari and ff on Mac) anything inline had a 1px gap between the lines. So in the solution below I just added a padding top of 1px to the span to adjust for that gap. I'ts a little hacky, but it gets the job done. You'll want to do much more browser testing obviously. It scales fairly well with browser zoom on chrome and ff, but gets a little off at really large zoom rates on safari.

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: none;
    font-size: 30px;
    color: #FFF;
}
h1 span {
  background: rgba(0,0,0,0.5);
  line-height: inherit;
  display: inline;
  padding-top: 1px;
}

<h1>
    <span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span> 
</h1>

这篇关于如何停止行之间重叠的多行文本的透明背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！