如何用空格和断线对齐文本的中心

Question

我有以下例子：

​

.wrapper {
  text-align: center;
  border: 1px solid red;
  background-color: white;
  color: black;
  width: 240px;
  height: 200px;
  font-size: 36px;
  line-height: 43px;
}

<textarea class="wrapper" autosize>THE GREAT BANGKOK SALE</textarea>

​

https://jsfiddle.net/ngoctuan001/cgLvh62o/2/

如您所见，我想通过文本对齐textarea标记中的文本。因为文本区域有固定的宽度，所以当有空格时，它会尝试中断到下一行。然而，当这种情况发生时，由于空间的原因，这一行在人的眼睛中稍微不是中心。

​

​

​

​

正如您在屏幕截图中看到的，右边的红线总是略长于左手边的红线，这是因为计算机将空格(突出显示)视为多一个字符。但在人类眼中，这并不被认为是中心对齐。

有办法解决这个问题吗？谢谢

Answer 1

遗憾的是，在编写本报告时，没有具体的CSS解决方案来实现所需的结果。

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 2

把你的文本放在p标签中，你可以尝试

.wrapper
{
display: flex;
    align-items: center;
    justify-content: center;

}

Answer 3

一种解决方案是在div上使用contentEditable="true“。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

<div class="wrapper" contentEditable="true">
  THE GREAT BANGKOK SALE
</div>

这将使内容正确的中心，也可以编辑它。

要获得内容，您：

const content = document.querySelector('.wrapper').innerText;