как выровнять текст по центру текста с пробелом и переводом строки

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 тег. Поскольку текстовая область имеет фиксированную ширину, она будет пытаться разбить следующую строку, когда будет пробел. Тем не менее, когда это происходит, этот ряд немного не в центре человеческого глаза из-за пробела.

Как видно на снимке экрана выше, красная линия в правой части всегда немного длиннее красной линии в левой части, потому что компьютер рассматривает пространство (выделенное) как Еще 1 персонаж. Но в человеческих глазах это не считается выровненным по центру

Есть ли способ исправить это? Спасибо

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

Одним из решений было бы использование contentEditable = "true" в div.

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;