Justify and Center <textarea> text HTML/CSS?

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;
}

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>