-1

I want to make a div that will wrap it's line based on the outer div width. The problem is that the outer div has "Display: inline-block". HTML:

<div class="option__description">
  {{optionItem.description}}
</div>

CSS:

:host {
  content: '';
  display: inline-block;
  cursor: pointer;

  width: 50%;
  height: 100%;
}

.option__description{
  width: 100%;
  max-width: 100%;

  word-wrap: break-word;
}

I've tried several things like adding outer div with display: flex. it didn't work...

edit 2: https://stackblitz.com/edit/basic-option-menu?file=src%2Fapp%2Foption-menu%2Foption-item%2Foption-item.component.css

Rob
  • 14,746
  • 28
  • 47
  • 65
Tamir Nachum
  • 1
  • 1

3 Answers3

0

When looking at your example, the content wraps normally. I guess it is about long words not breaking. Use overflow-wrap: break-word; on your inner wrapper to enable that behaviour. Example: https://stackblitz.com/edit/basic-bootstrap-xrydq7

Daniel Sixl
  • 2,488
  • 2
  • 16
  • 29
  • It works for my first example but not for the second one – Tamir Nachum Oct 14 '18 at 14:14
  • There was no 2nd example when I was answering ;) The answer of aloisdg is detailed and well researched. – Daniel Sixl Oct 15 '18 at 10:22
  • 1
    This is a comment, not an answer, and links to third party sites are not allowed as answers. Please form your own answer here. https://stackoverflow.com/help/how-to-answer – Rob Oct 16 '18 at 12:16
0

Try this stackblitz:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Here's the scoop:

  • overflow-wrap: break-word; makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap as well because as the spec says, they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap. Blink (tested Chrome v45) will take either one.
  • With overflow-wrap in use all by itself, words will break kinda anywhere they need to. If there is an "acceptable break" character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do.
  • You might as well use hyphens as well, because then it will try to tastefully add a hyphen where it breaks if the browser supports it (Blink doesn't at time of writing, Firefox does).
  • word-break: break-all; is to tell the browser that it's OK to break the word wherever it needs to. Even though it kinda does that anyway so I'm not sure in what cases it's 100% necessary.

source <-- the whole article is useful. Read it!

I alse recommend you this StackOverflow thread: What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

aloisdg
  • 22,270
  • 6
  • 85
  • 105
  • No one has needed vendor prefixes for that in many years. This is antiquated CSS. If your markup is relevant to the answer, you should post it here, not that stackblitz thing. – Rob Oct 16 '18 at 12:22
  • I'm betting you could have created your demo here using SO's tools. – Rob Oct 16 '18 at 12:28
  • @Rob feel free to submit an edit of my post with a working angular demo. I will be glad to accept it. – aloisdg Oct 16 '18 at 12:31
0

I've found the problem. in option-row component I had: 

white-space: nowrap;

this blocks all text wrapping.

I've changed it back to white-space: normal in option-item component.

you can check my second example if you need more details.

Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
Tamir Nachum
  • 1
  • 1
  • 1
    This doesn't answer the question because you refer to markup that is not available for viewing here on SO. – Rob Oct 16 '18 at 12:21