how to break long word in Span?(using Twitter Bootstrap)

Question

I'm using Twitter bootstrap in my site and I'm having span which may contain long word and I need to break it. I use this Css but not working? what's problem?

.fidDivComment {
    white-space: pre-wrap;
    display: inline-block;
}

enter image description here

possible duplicate http://stackoverflow.com/questions/320184/how-to-prevent-long-words-from-breaking-my-div — Liam, Jun 15 '13 at 14:50

score 31 · Accepted Answer · edited Oct 21 '14 at 05:22

31

You need to add this to your CSS for that span

span {
  -ms-word-break: break-all;
  word-break: break-all;

  /* Non standard for webkit */
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

See this article for an explanation.

edited Oct 21 '14 at 05:22

alex

479,566
201
878
984

answered Jun 15 '13 at 15:16

Adam Simpson

3,591
2
22
27

You should either hyphenate words properly, or break strings arb itrarily if you have special content for which that is appropriate. Doing both on same content is wrong. – Jukka K. Korpela Jun 15 '13 at 15:18
Jukka, if you read the article I linked to, you need all those CSS properties for the best browser support. – Adam Simpson Jun 15 '13 at 15:19
The hyphens bit is optional - I omitted this for my use case (long emails) – Liam Johnston Jul 23 '15 at 21:01
Will this respect rules according to the meta page language such as putting hyphens between syllables? – beppe9000 Feb 07 '17 at 01:57

score 4 · Answer 2 · answered Aug 01 '16 at 07:47

The questions stated this:

(using Twitter Bootstrap)

so the bootstrap fix is this: @include hyphens; this bootstrap out of the box mixin will add word-wrap: break-word; this mixin is exist under this path:

/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss

how to break long word in Span?(using Twitter Bootstrap)

2 Answers2