对齐和居中 <textarea> 文本 HTML/CSS？答案

【问题标题】：Justify and Center <textarea> text HTML/CSS?对齐和居中 <textarea> 文本 HTML/CSS？
【发布时间】：2014-08-20 19:41:17
【问题描述】：

我有一个 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;
}

谢谢大家！

【问题讨论】：

你试过text-align: justify;吗？？
@LcSalazar 最后一行没有居中。编辑 - 或第一行，如果它是唯一的。
自己试过但没有成功，可能[this][1]会有所帮助吗？ [1]：stackoverflow.com/questions/427039/…
也许这会有所帮助？ stackoverflow.com/questions/4704896/…
text-align: justify -> 拉伸线条，使每条线的宽度相等 - 如果只有一条线，则没有任何东西可以拉伸它，因此它可以按预期工作。最后一行也是如此，它将上面的行与下面的行对齐。

标签： html css textarea center justify

【解决方案1】：

不幸的是，在撰写本文时，还没有具体的 CSS 解决方案来达到预期的效果。

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

7.3 Last Line Alignment: the text-align-last property

该属性描述了一个块的最后一行或一行如何右移在强制换行符对齐之前。

但它仍处于工作草案状态。因此浏览器支持不够好，无法依赖这项技术（它仍然是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;
}

【讨论】：

谢谢！完美运行！
为了允许显示新行，您必须使用 'white-space: pre-line;' 而不是 'white-space:normal;'。另见here。

【解决方案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>

【讨论】：

此解决方案的一个可能问题是在 Chrome 中很难限制可编辑区域的高度。如果添加更多行，它会将文本拉伸到您指定的 150 像素之外。（Firefox 没有这个问题）。
@personal_cloud 您可以添加到.container 类overflow: auto; 以添加滚动条以防止多行文本超出div 高度

【解决方案3】：

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

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

我一直在寻找这个问题的答案，但找不到我在寻找什么；因此这篇文章。

【讨论】：

先参考这个meta.stackoverflow.com/questions/251361/…