在不使用空白div的情況下保留CSS形狀內的文本

This article顯示了可以在CSS中創建的幾種形狀。矩形的正方形很容易支持在形狀內添加文本。橢圓形和圓形將文本切出。三角形不顯示任何文字。心臟顯示背後的文字。而且由於添加了文字，鑽石不再像鑽石一樣。在不使用空白div的情況下保留CSS形狀內的文本

有沒有什麼體面的方式去爲這些CSS形狀添加文本？有沒有比使用浮動div來將文本放置在CSS Shape元素的單獨元素上更容易？一些成果的

例子：http://jsfiddle.net/EVBYt/

來源

2012-09-30 michaellindahl

CSS形狀，
文本在安全區在CSS形狀和CSS形狀
文本，其中文本將盡可能多的填充可用空間可能的

是三個很不同的野獸！

您引用的形狀由一個約束組成：使用單個元素。這在某些情況下導致0x0 px元素的背景色完全應用於僞元素。顯然，在這些情況下，您的文本將無法正確顯示，您必須使用其他方法完全重做這些形狀。

CSS regions已由Adobe提議給W3C。只需等幾年，就可以實現標準化和實施:)

在這漫長的等待期間，Tantek Celik和Eric Meyer在10年前以空白div進行遊戲（例如：http://meyerweb.com/eric/css/edge/curvelicious/demo.html）仍然相關。
假設您想要實現設計，當在IE8中用戶選擇了較大的文本時，將會爆炸，或者在Firefox中使用單一級別的縮放文本來選擇。雖然流體尺寸在em也許？

我會使用SVG如果我被迫將文本樣式設置爲如此複雜的形狀。

來源

2012-09-30 22:41:19 FelipeAls

感謝您的信息。我知道至少應該談論CSS地區，現在不是這裏感到難過。我不想使用圖像，所以我想我最終會在CSS形狀上面使用浮動div。（這個問題涉及到這個項目：http://stackoverflow.com/questions/12650965/css-diamond-shape-centric-website-issues） – michaellindahl

CSS區域現在支持[最新]的Safari，但是，它看起來像我仍然不能用它來完成我想完成的任務。看來我仍然只限於矩形形狀。我錯過了什麼嗎？ – michaellindahl

聽起來像你想要的是CSS形狀，而不是區域。今天在Chrome，Safari和Opera支持CSS形狀 - http://sarasoueidan.com/blog/css-shapes/ –

在不使用空白div的情況下保留CSS形狀內的文本

回答

相關問題