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!

Crosswalk

Have you tried text-align: justify; ?? – Thundery

@Thundery It doesn't center the last line. EDIT-Or the first line if its the only one. – Crosswalk

Tried myself but without success, may be [this][1] will help? [1]: #427539 – Bioclimatology

Maybe this will help? #4705396 – Jacobsen

text-align: justify -> Stretches the lines so that each line has equal width - if there is only one line there is nothing to stretch it against so it works as expected. Same goes for the last line it align the above line with the one underneath. – Dachi

You may need to involve higher power to get the result you want – Dachi

There is actually a Css Text Level 3 Property called text-align-last, that is supposed to change the alignment of the last line of a text... But I couldn't figure it out yet... I think the support is not wide still too.. developer.mozilla.org/en-US/docs/Web/CSS/text-align-last – Thundery

Answer 1

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

Matsuyama

In order to allow to show the new lines you must use 'white-space: pre-line;' instead of 'white-space:normal;'. See also here. – Putnem

Answer 2

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>

Condign

A possible issue with this solution is that it is hard to constrain the height of the editable region in Chrome.If you add more lines, it stretches the text outside of the 150px that you specified. (Firefox does not have this issue). – Denitadenitrate

@Denitadenitrate you can add to .container class the overflow: auto; to add scrollbars to prevent exceed div height by multilines text – Gloze

Answer 3

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.

Sather

refer this first meta.#251861 – Ramtil

Answer 4

I know this was 7 years ago. But the short answer is that this works flawlessly

text-align: center

Coumarone

this centers horizontally the text but does not justify it. – Nickelic