Question

我有一个textarea，我希望它是合理的，所以所有的线条宽度相等，并且当文本区域不在最大线长度时，文本位于textarea的中间。

这是我的textarea：

<textarea class="Whiteboard" type="text" placeholder="Type something..."></textarea>

...和CSS：

textarea.Whiteboard{
    resize: none;
    background-color: #F1F1F1;
    border: none;
    height: 500px;
    width: 800px;
    text-align: center;
    font-size: 50px;
}

谢谢大家！

Answer 1

不幸的是，在编写本文时没有具体的CSS解决方案来实现所需的结果。

然而，CSS 3级引入了一个名为text-align-last的功能来处理块的最后一行的对齐：

<强> 7.3 Last Line Alignment: the text-align-last property

此属性描述块的最后一行或行的右边   在强制换行符合之前。

但它仍处于 Working Draft 状态。因此，浏览器支持不足以依赖这项技术（它仍然是buggy on Chrome 35并且仅适用于Firefox 12 +）。

这是 example ，我无法验证^{（因为我的FF4。是的！羞辱我）}：

textarea {
    white-space: normal;
    text-align: justify;
    -moz-text-align-last: center; /* Firefox 12+ */
    text-align-last: center;
}

Answer 2

替代：使用contenteditable

.container {
  width: 100px;
  height: 150px;
  background: #eee;
  display:flex;
  align-items: center;
  justify-content: center;
}

.text {
  text-align: center;
  word-break: break-all;
  margin: 10px;
}

<div class="container">
  <div class="text" contenteditable=true>click here and edit</div>
</div>

Answer 3

为了使textarea元素居中，你必须在CSS中将它声明为块元素，然后在必要时添加典型的居中规则。

textarea { display: block; margin: 0 auto; }

我一直在寻找答案，但却找不到我要找的东西;因此这篇文章。

Justify和Center <textarea>文本HTML / CSS？</textarea>

3 个答案: