border-radius;溢出：隱藏，並且文本沒有被裁剪

我正在做一些文本內部的圓形div，其中的文本碰到容器的頂部。我已經能夠控制幾乎所有的內容，嵌套的div，設置爲背景的圖像等，並且都能夠成功剪輯，但是這一直讓我非常悲傷。border-radius;溢出：隱藏，並且文本沒有被裁剪

因爲我們有動態的圖形背景，所以使用舊式圖像邊框或掩飾並不是一個解決方案。我們需要一個解決方案，實際上是剪輯文本。

這是的Firefox 3.x和舊版本的大多可見鍍鉻

這裏的示例代碼一起玩：

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的，所以很想能爲他們提供了一個完美的解決方案以及。任何幫助感謝！乾杯

來源

2011-04-16 ioTus

哇......看起來相當的任務....祝您好運lol – Jason 2011-04-16 06:20:03

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

圖像不會工作，因爲文本是從博客文章標題生成。 – ioTus 2011-04-16 20:48:21

這一個工作在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）。

來源

2011-04-16 07:09:07 Willem

有趣的方法，雖然不是我們所需要的。我們具有高度動態的背景圖像，需要在所有UI元素上進行顯示和圓角。 – ioTus 2011-04-16 20:50:27

這確實是這個解決方案唯一的大缺點。有了背景圖片，我想不出有什麼好的解決方案，我想你總是會用一種覆蓋應該隱藏的部分的方法。或者只是添加足夠的填充，以便裁剪從不需要... – Willem 2011-04-17 10:40:54

作爲信息的一般位，我們當前的部分「解決方案」是在20％的alpha透明度文本，所以文本裁剪不太明顯，但高-contrast solid bg顏色彈出文本。仍然不合法的剪輯/屏蔽，但朝着正確的方向邁出了一步 – ioTus 2011-04-18 21:46:42

border-radius;溢出：隱藏，並且文本沒有被裁剪

回答

相關問題