Question

我想创建一个圆形的textarea，文字符合形状

This - 是我尝试过的，但我不知道如何在不使用javascript的情况下让文字保持在圈子的范围内。

Answer 1

你所说的“带有圆形和文本拟合的textarea”的含义含糊不清，以下解决方案将遵循html中textarea的渲染规则，并会给你一个带有文字fitting inside it的圆圈，虽然要获得圆形的文字但不会（-webkit-shape-inside可以使用

）

添加适量的填充

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

小提琴：http://jsfiddle.net/zuh7z/8/

背后的数学！

计算所需填充的确切公式：

sqrt（2）*（width / 2） - （width / 2）

在我们的例子中：width = 500px

必填项= sqrt（2）*（500/2） - （500/2）
= 353.55 - 250 = 103.55

填充：103.55px

Answer 2

好的，所以这仍然是一个实验性的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;
}

Answer 3

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

主要想法是用

替换textarea

<div contenteditable>

并使用旧技巧从文本中剪下弯曲部分，并使用一组适当大小的隐形浮标。

但似乎使用这种方法我们需要在这样的'textarea'中获得插入符号的垂直位置以防止它溢出，并且这个脚本最终变得像NASA一样（我发现了一些东西） How to get number of rows in ContentEditable area and current caret line position?中的主题，但无法将该解决方案应用于此示例。）

Answer 4

也许添加一些填充可以帮到你？

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

您可能需要弄清楚值：）

Answer 5

尝试this plugin ..使用简单，可根据要求进行修改..

Answer 6

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

您必须解决许多小的可用性问题（例如如何处理基于鼠标和基于触摸的文本选择），但它是可行的。只取决于你想花多少钱在这上面。：）

如何创建一个圆形文本区域

6 个答案:

背后的数学！