border-radius; overflow：hidden，并且文本不被剪裁 [英] border-radius; overflow: hidden, and text is not clipped

问题描述

我在圆形div中做一些文体文字，文字在容器的顶部。我已经能够控制几乎所有的内容，嵌套的div，图像设置为背景等，并且他们都成功地剪辑，但这一个一直给我很严重的悲伤。

使用老式的图像边框或掩盖不是一个解决方案，因为我们有动态图形背景。我们需要一个解决方案来实际剪辑文本

。

这主要在 Firefox 3.x Chrome

以下是要使用的示例代码：

它有一些缺点，你可以在第二个例如（在FF 3.6中）裁剪掉的边框有一个纯色，所以如果你使用某种背景，这可能看起来很丑陋。只是看看它，它可能符合您的需求。

我刚添加了一个span：

 < div> ; span>< / span> WXYZ< / div> 
  

，然后将其放置在文本上，边框的颜色与背景相同，边框大小：

  div {
 position：relative; 
 etc ... 
} 
 span {
 position：absolute;显示：block; width：100％;高度：100％; 
 border：25px solid #fff; top：-25px; left：-25px; 
 -moz-border-radius：70px; border-radius：70px; / * 45 radius + 25 border * / 
} 
  

在正确支持border-radius的浏览器中，span（和它的border-color）不是甚至是可见的，因为它被剪切掉（overflow：hidden）。

I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.

Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.

This is mostly visible in Firefox 3.x and older versions of Chrome

Here's the sample code to play with:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

the jank:

Notice it's been fixed in the new Chrome and FireFox 4 - the shui:

Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers

解决方案

This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/

It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.

I just added a span:

<div><span></span>WXYZ</div>

and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!

In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).

这篇关于border-radius; overflow：hidden，并且文本不被剪裁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！