Justify and Center <textarea> text HTML/CSS?

吃可爱长大的小学妹 提交于 2019-12-22 08:08:50

问题


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!


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



回答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>



回答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.



来源:https://stackoverflow.com/questions/25413143/justify-and-center-textarea-text-html-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!