Thursday, April 7, 2011

CSS: Word Wrap

It is possible to force long continuous text to wrap in a new line by specifying break-word with the word-wrap  property. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers.

Word-Wrap has basically two values normal or break-word value with the word-wrap property.
  • Normal means the text will extend the boundaries of the box. 
  • Break-word means the text will wrap to next line.
In your style-sheet :
.wrapwords { 
   word-wrap: break-word; 

Note : Please remember that if parent div has a property called white-spacenowrapthen this doesnt work.

Sunday, April 3, 2011

CSS Trick To Hide Horizontal Vertical Scrolling

Sometime as per need you want to hide horizontal-vertical bar in your pages. This can be achieved through cascading style sheet (css). It is possible to forcibly hide either the horizontal or the vertical scrollbars.

To show vertical scroll-bar and hide horizontal scroll-bar, add following lines in style-sheet :
overflow-x: hidden;
overflow: auto;

To show horizontal scroll-bar and hide vertical scroll-bar,
add following lines in style-sheet :
overflow-y: hidden;
overflow: auto; 

If you want to accomplish the same in Gecko (NS6+, Mozilla, etc) and IE4+ simultaneously, I believe code below should work: