4

我想创建一个textarea圆形，文本适合形状

这- 这是我尝试过的，但我不确定如何在不使用 javascript 的情况下让文本保持在圆圈的边界内。

4

6 回答 6

2

There is ambiguity in what you mean by "textarea with shape of circle and text fitting inside", the following solution will abide by the rendering rules of a textarea in html, and will give you a circle with text fitting inside it, albeit to obtain the text in a circular shape it will not (that will be possible with -webkit-shape-inside)

adding the appropriate amount of padding

textarea {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    padding:110px;
}

fiddle: http://jsfiddle.net/zuh7z/8/

the mathematics behind it!

The exact formula for calculating the required padding:

sqrt(2)*(width/2) - (width/2)

In our case: width = 500px

required padding = sqrt(2)*(500/2) - (500/2)
= 353.55 - 250 = 103.55

padding: 103.55px

于 2013-07-02T17:14:45.850 回答
1

好的，这仍然是一个实验性的 CSS3 功能，请在此处阅读：http: //www.adobe.com/devnet/html5/articles/css3-regions.html。

这是仅限Chrome的解决方案。您必须在 chrome://flags 中启用“启用实验性 WebKit 功能”标志并重新启动浏览器。

这是一个小提琴：http: //jsfiddle.net/7JD9E/4/

HTML：

<textarea>Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremrem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremrem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremrem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem  Lorem Lorem alskd fhow eijhf lkn ldh weo djf;'sdf </textarea>

CSS3：

textarea {
    width: 500px;
    height: 500px;
    -webkit-shape-inside: circle(50%,50%,50%);
    border-radius: 500px;
}
于 2013-07-02T17:38:33.933 回答
1

只是一个快速的概念验证：http: //jsfiddle.net/zuh7z/11/

主要思想是将textarea替换为

<div contenteditable>

并使用旧技巧用一组适当大小的不可见浮动从文本中切出弯曲部分。

但似乎使用这种方法，我们需要在这样一个“textarea”中获取插入符号的垂直位置以防止它溢出，并且这个脚本最终变得有点像 NASA（我在这个主题上找到了一些东西）如何获取 ContentEditable 区域中的行数和当前插入符号行位置？但无法将该解决方案应用于此示例）。

于 2013-07-02T18:42:28.277 回答
0

Maybe adding some padding would help you?

textarea {
    width: 350px;
    height: 350px;
    border-radius: 250px;
    padding:75px;
}

You might need to mess around with the values tho :)

于 2013-07-02T17:14:58.697 回答
0

您可能正在考虑的“NASA like js”解决方案是使用 SVG 编写一个自定义控件，该控件响应位于其后面的隐藏文本区域上的关键事件。单击它，专注于文本区域。在 textarea 中输入的文本会在 SVG 圆圈中排列。它的好处是在圆形剪辑区域内布置文本，因此您不再需要在圆形 CSS 边框内处理方形文本区域。

您必须解决许多小的可用性问题（例如如何处理基于鼠标和基于触摸的文本选择），但它是可行的。仅取决于您想为此付出多少努力。:)

于 2013-07-02T18:04:10.367 回答
0

试试这个插件..使用简单，可以根据需要修改..

于 2013-07-02T17:52:23.190 回答