4

I have HTML and CSS as shown in http://jsfiddle.net/Lijo/Ydjde/

The problem is the text inside div is not confined to the div. It breaks the div and write. How can we wrap the text inside the div itself with following features?

• The full text will be readable

• It will not break the div

Is there a way to use it in CSS 2.1? I believe word-wrap is CSS 3.0 feature.

Note: I have width defined as width:100px; and width:30px; for the first and second divs

Note: The span is generated from ASP.Net Label control. Hence we cannot change/replace the span. The problem is to be resolved using CSS.

 <span id="detailContentPlaceholder_Label1">25123456789</span>

enter image description here

Reference:

  1. Word-wrap in an HTML table
  2. CSS word-wrapping in div
  3. CSS3 word-wrap Property
Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418
  • possible duplicate of [CSS word-wrapping in div](http://stackoverflow.com/questions/502500/css-word-wrapping-in-div) – Buggabill Sep 12 '12 at 12:26
  • 2
    This is not a duplicate. This question in for doing it using CSS 2.1 – LCJ Sep 12 '12 at 12:37
  • 1
    How early of a browser do you need to support? Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari. – Buggabill Sep 12 '12 at 12:40

4 Answers4

12

word-wrap: break-word; is your friend. See your updated JSFiddle.

Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
  • 1
    @Lijo: Technically this is not CSS2.1; it's completely non-standard. But given the question, I suppose "CSS2.1" here really means "supported by IE6+" – BoltClock Mar 12 '13 at 10:13
  • @BoltClock Thanks. I meant IE6+ only. Do you have any suggestion that satisfy CSS2.1 and IE6+ ? – LCJ Mar 12 '13 at 10:31
  • 1
    @Lijo: Nope. IE6 isn't CSS2.1-compliant so you'll be hard pressed to find many of its features that will work. – BoltClock Mar 12 '13 at 10:36
2

do you mean word-wrap: break-word?

http://jsfiddle.net/PhRKh/

(edit: oops, didn't see the other answer)

Roman
  • 5,888
  • 26
  • 47
0
you add change width:35px  then work properly

   .fixedColumnValue{
      width:auto;
    }
ram
  • 253
  • 1
  • 5
0

I have found something strange here about word-wrap only works with width property of css properly.

here is a working demo that i have prepared about it.

I know its too late but it could help others!

immayankmodi
  • 8,210
  • 9
  • 38
  • 55