CODEWITHSUNDEEP
jqueryhtmlcss
Godwin Romero
Godwin Romero

Reputation: 57

limiting the width of text box

I encountered a problem where the contents of a <p> or a <div> can have a long text string without spaces. What I want to do is limit the width of the <p> or <div> so that when the text is wider than the width, it doesn't force the width to be wider than what I specified. I tried every style I could think of to limit the width but nothing has worked so far.

<div style='100px;'>
  <p style="width: 100px;">
    ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
  </p>
</div>

Upvotes: 0

Views: 56

Answers (2)

user9263373
user9263373

Reputation: 1074

Interestingly I thought all you would need was the max-width property, but it gets ignored if you have a text string without spaces that's wider than the the max-width specified. So in order to accomplish what you need, you also have to have word-wrap: break-word;. This combination will work.

p {
        max-width: 100px;
        word-wrap: break-word;
}
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
  </p>

  <p>
    HereIsAnotherParagraphWithALongTextStringWithoutAnySpacesAndSeeHowItWordWrapsWithoutWideningTheParagraph.
  </p>
</div>

Upvotes: 0

thanhtung90
thanhtung90

Reputation: 67

Try property word-wrap: break-word; and even white-space: pre-wrap; for better use.

Upvotes: 1

Related Questions