将文本对齐在半圆形的 div 内部

Question

我有一个div的代码，我想对其中的一些文本进行对齐。这段文本必须对齐到div的左侧曲线。怎么实现呢？

这是div的代码：

#cv {

position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;

padding: 10px;


}

- Vagelism

Answer 1

我认为你想让文字沿着半圆形排列，而不是普通的靠边对齐。目前没有一个简单的CSS属性可以实现此功能。但有一些像这样的技巧成为hacky： http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes 甚至有一些工具可以帮助您，例如： http://www.csstextwrap.com/ Adobe正在推出一种新的CSS属性来实现文字环绕效果： http://www.adobe.com/devnet/html5/articles/css3-regions.html Chrome Canary应该已经支持了，但我想这对你今天没有什么用处。我觉得你今天只能使用hacky的方法来实现了...

- Pevara

Answer 2

工作示例：http://jsfiddle.net/mQFK6/4/

您想添加一个<p>来容纳文本，然后将其向下移动50％到圆的中心，并且float它在left位置。

#cv {

position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;


}

p{
    top: 50%;
    position: relative;
    float: left;
    margin-left: 5px;
}

- What have you tried

---

谢谢。实际上，我在 div 中的文本是在 <p> 中，所以我会尝试这种方法！ - Vagelism