CODEWITHSUNDEEP
htmlcss
Adamo
Adamo

Reputation: 596

Css - understanding "word-wrap: break-word;"

I have a small problem with css style. I'm trying to do breakline if the text in the span is too long. I expect that before the third SPAN perform a line break. But something goes wrong. Please for assistance.

Code:

<span id="j_id0:j_id12" class="sp">Abcd abcdabcd2
   <span style="border-style: dotted; word-wrap: break-word; width: 80px;" 
   class="absoluteLeft">Add you viewing ten equally believe put</span>
</span>

JsFiddle

Upvotes: 2

Views: 110

Answers (2)

Dune
Dune

Reputation: 694

Span is inline element, so it won't break word. If you need to break word the element should be a block (ex. div) or should be displayed as such (then you need to add display:block to your span's css).

EDIT I don't know why you need a class "absoluteLeft". I'd remove that. And then I'd add in a css:

span span {
   display:inline-block;
}

And, of course, you have to remove from dotted span a style display:block;

Does that resolve your problem?

Upvotes: 1

Brijal Savaliya
Brijal Savaliya

Reputation: 1091

Put display:block; to span

<span id="j_id0:j_id12" class="sp">Abcd abcdabcd2
       <span style="border-style: dotted; word-wrap: break-word; width: 80px;display:block;" 
       class="absoluteLeft">Add you viewing ten equally believe put</span>
    </span>

Upvotes: 0

Related Questions