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

Question

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

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

Answer 1

你所说的"textarea with shape of circle and text fitting inside"的意思有歧义，下面的解决方案将遵守html中textarea的渲染规则，并将给你一个圆圈，里面有文本适合它，尽管要获得圆形的文本它不会(这将有可能使用-webkit-shape-in​​side)

添加适当数量的填充

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

fiddle :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