2

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

Adamo
  • 586
  • 1
  • 9
  • 28
  • First you don't have absoluteLeft class, second what is the main issue? – Leo the lion Apr 15 '16 at 11:59
  • @Adamo `word-wrap: break-word;` will only work with elements that have specific widths - therefore you cannot set it on an `inline` element. In your code provided, your span is inline, which means the width will be ignored and so word wrap will not work. Either make your span a `block`, or `inline-block` element – Pete Apr 15 '16 at 12:06
  • https://jsfiddle.net/zer00ne/8k08nyr0/1/ – zer00ne Apr 15 '16 at 12:06
  • @zer00ne I must have something like that: https://jsfiddle.net/e50dj9fa/3/ – Adamo Apr 15 '16 at 12:08
  • @zer00ne check his updated fiddle plz – Leo the lion Apr 15 '16 at 12:09
  • This is what I see https://jsfiddle.net/e50dj9fa/3/ – zer00ne Apr 15 '16 at 12:10
  • Yea, ant it's a issue. I expect that if I have word-wrap the span with value abcdabcd3 will automatic break line and add empty line. – Adamo Apr 15 '16 at 12:11
  • 1
    inline elements make lines unbreakable, it's their nature. – zer00ne Apr 15 '16 at 12:13
  • Understand, so I must change that span to block ? – Adamo Apr 15 '16 at 12:16
  • 1
    Yes or inline-block is better since you want to line it up with that other span to it's left. Remove that `position: absolute` and `left:175px` as well. And give this a read: http://stackoverflow.com/a/35251345/2813224 I think you need to do something else. – zer00ne Apr 15 '16 at 12:20
  • @zer00ne We did not understand well. I mean that I would get such an effect as now: https://jsfiddle.net/e50dj9fa/4/ but without the use of breaklines in Abcd abcdabcd3. I would like to be able to get through pure css, because they do not know how the text will be a long and how much breaklines I have to insert – Adamo Apr 15 '16 at 12:40
  • If you have a long word, and your container's width (and possibly height) is not an absolute value (such as px), then the hopes of breaking (or hyphenating) it are futile. I suggest a different route…like…ellipsis…and…the…use…of…`display:table`… – zer00ne Apr 15 '16 at 15:53

2 Answers2

1

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?

Dune
  • 674
  • 1
  • 9
  • 19
  • Please read full question with issue then try to give answer with desired output. Thankx – Leo the lion Apr 15 '16 at 12:09
  • I wan't something like that https://jsfiddle.net/e50dj9fa/4/ but without breaklines – Adamo Apr 17 '16 at 09:05
  • I don't think you used my tip. You still have absolute positioning and span's child isn't displayed as inline-block. Look: https://jsfiddle.net/e50dj9fa/7/ – Dune Apr 18 '16 at 10:11
0

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>
Brijal Savaliya
  • 1,101
  • 9
  • 19