CODEWITHSUNDEEP
htmlcsscontenteditable
JacopoStanchi
JacopoStanchi

Reputation: 2146

HTML contenteditable with expanded and centered text

I want an editable field (like a textarea but not necessarily) whose text is centered and whose borders expand when the text reaches them. The closest I've come to a (simple) solution is this:

<p style="text-align: center; width: 100px; border: 2px solid;" contenteditable="true" nowrap>Hello</p>

Unfortunately, the nowrap property on <p> works only on Firefox and the text remains centered on 50px instead of the center of the longest line of the paragraph. What else can I do? Thank you.

Upvotes: 1

Views: 1017

Answers (1)

Stickers
Stickers

Reputation: 78686

You can set inline block + min width, so that the box will expaned to match the text length, also use CSS white-space:nowrap; instead of the HTML nowrap attribute.

p {
  border: 2px solid;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  min-width: 100px;
}
<p contenteditable="true">Hello</p>

Upvotes: 1

Related Questions