2011-04-16 112 views
10

我正在做一些文本内部的圆形div,其中的文本碰到容器的顶部。我已经能够控制几乎所有的内容,嵌套的div,设置为背景的图像等,并且都能够成功剪辑,但是这一直让我非常悲伤。border-radius;溢出:隐藏,并且文本没有被裁剪

因为我们有动态的图形背景,所以使用旧式图像边框或掩饰并不是一个解决方案。我们需要一个解决方案,实际上是剪辑文本。

这是的Firefox 3.x和旧版本的大多可见镀铬

这里的示例代码一起玩:

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; 
} 

的JANK:

enter image description here

注意它被固定在新的Chrome和Firefox 4 - 瑞:

enter image description here

我们的大多数网站用户都是Firefox 3.6的,所以很想能为他们提供了一个完美的解决方案以及。任何帮助感谢!干杯

+0

哇......看起来相当的任务....祝您好运lol – Jason 2011-04-16 06:20:03

+0

您可以使用图像;) – Blender 2011-04-16 06:28:56

+0

图像不会工作,因为文本是从博客文章标题生成。 – ioTus 2011-04-16 20:48:21

回答

5

这一个工作在FF 3.6:http://jsfiddle.net/vfp3v/15/

它也有一些缺点,你可以在第二个例子中看到(在FF 3.6)的修剪掉边框具有坚实的颜色,所以如果你使用的是一些这种背景可能看起来很丑。只要看看它,它可能适合您的需求。

我只是增加了一个跨度:

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

,然后将其定位在具有相同的颜色作为背景边框的文本,位移大如边界:

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 */  
} 

编辑:刚刚在chrome 10.0.6中测试了这个(它有剪切bug),它工作正常!

在正确支持border-radius的浏览器中,跨度(以及它的边框颜色)甚至不可见,因为它被截断(overflow:hidden)。

+0

有趣的方法,虽然不是我们所需要的。我们具有高度动态的背景图像,需要在所有UI元素上进行显示和圆角。 – ioTus 2011-04-16 20:50:27

+0

这确实是这个解决方案唯一的大缺点。有了背景图片,我想不出有什么好的解决方案,我想你总是会用一种覆盖应该隐藏的部分的方法。或者只是添加足够的填充,以便裁剪从不需要... – Willem 2011-04-17 10:40:54

+0

作为信息的一般位,我们当前的部分“解决方案”是在20%的alpha透明度文本,所以文本裁剪不太明显,但高-contrast solid bg颜色弹出文本。仍然不合法的剪辑/屏蔽,但朝着正确的方向迈出了一步 – ioTus 2011-04-18 21:46:42