Justify and Center <textarea> text HTML/CSS?

Question

I have a textarea and I want it to be justified so all the lines are equal in width and to be centered to the text stays in the middle of the textarea when it's not at maximum line length.

This is my textarea:

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

...and the CSS:

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

Thank you all!

Answer 1

Alternative: use 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

In order to center the textarea element, you have to declare it as a block element in CSS and then add typical centering rules, if necessary.

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

I was looking for an answer to this and could not find out what I was looking for; hence this post.

Answer 3

Unfortunately there is no concrete CSS solution at the time of writing to achieve the desired result.

However CSS level 3 has introduced a feature under the name text-align-last to handle the alignment of the last line of a block:

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

This property describes how the last line of a block or a line right before a forced line break is aligned.

But it is still in Working Draft state. Hence the browser support is not good enough to rely on this technology (It's still buggy on Chrome 35 and only works on Firefox 12+).

Here is an example which I'm not able to verify ^{(because of my FF4. Yes! shame on me)}:

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