How to Wrap/break continues text in table using CSS

We can wrap/break the continues text in table row using CSS .

Sometime user can entered long content without space between to word. like some big email ids. which can break our fixed layout web template, To avoid this designing problem, please follow following steps

Step 1

Add following code to your CSS file.

1 2 3 4 5 6 7 8 9

.ClassName{    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */    white-space: -pre-wrap; /* Opera 4-6 */    white-space: -o-pre-wrap; /* Opera 7 */    white-space: pre-wrap; /* css-3 */    word-wrap: break-word; /* Internet Explorer 5.5+ */    word-break: break-all;    white-space: wrap; /* Internet Explorer 8 and other*/    }

Step 2

Add this class to respective table cell. please refer demo.
Above css class is added to email-id column for wrap email-id content .

USER NAME	E-MAIL ID	PHONE NO.	CITY
User 1	user1.surname@mail.com	919822565414	Chennai
User 2	user2@usermail.com	919874565412	Bangalore

Quick CSS3 and CSS2 shorthand guide

CSS2 and CSS3 Shorthand Guide

CSS shorthand can really help you reduce and optimize CSS files. Instead of using multi-lines of properties, we can make it one liner. The following is the CSS3 and CSS2 shorthands properties:

1. CSS Margin

01 02 03 04 05 06 07 08 09 10

/* use Margin shorthand*/ h1 {margin:5px  10px  5px  10px;} /* instead of */ h1 {margin-top:5px;     margin-right:10px;     margin-bottom:5px;     margin-left:10px; }

2. CSS Padding

1 2 3 4 5 6 7 8

h1 {Padding :5px  10px  5px  10px;} /* instead of */ h1 {Padding-top:5px;     Padding-right:10px;     Padding-bottom:5px;     Padding-left:10px; }

3. CSS Border

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

h1 {border:1px solid #CCC;} /* instead of */ h1 {border-width:1px;     border-style:solid;     border-color:#CCC; } /*** Use border width shorthand ****/ h1 {border-width:1px 2px 3px 4px;}    h1 {border-top-width:1px;     border-right-width:2px;     border-bottom-width:3px;     border-left-width:4px; }

5. CSS3 border-radius

1 2 3 4 5 6 7 8 9

div {border-radius:1px  2px  3px  4px;} /* instead of */ div {      border-top-left-radius: 1px;      border-top-right-radius: 2px;      border-bottom-right-radius: 3px;      border-bottom-left-radius: 4px; }

6. CSS background

01 02 03 04 05 06 07 08 09 10

div {background:#f00 url(background.gif) no-repeat fixed 0 0;} /* instead of */ div {      background-color:#f00;      background-image:url(background.gif);      background-repeat:no-repeat;      background-attachment:fixed;      background-position:0 0;  /* left top */ }

7. CSS Font

01 02 03 04 05 06 07 08 09 10 11 12 13 14

h1 {font:italic small-caps bold 12px/160% "Lucida Grande",sans-serif;} /*or with out some optional values*/ h1 {font:bold 12px/160% "Lucida Grande",sans-serif;} /* instead of */ h1 {font-style:italic;     font-variant:small-caps;     font-weight:bold;     font-size:12px;     line-height:160%;     font-family:"Lucida Grande",sans-serif; }

8. CSS list-style

1 2 3 4 5 6 7

ul {list-style:square inside url(image.gif);} /* instead of */ ul {list-style-type:square;     list-style-position:inside;     list-style-image:url(image.gif); }

9. CSS Color

when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:
#000000 becomes #000, #336699 becomes #369.

1 2 3 4

h1 {color:#000} /* instead of */ h1 {color:#000000;}

10. CSS3 box shadow

01 02 03 04 05 06 07 08 09 10 11 12

-moz-box-shadow:    3px 4px 5px 6px #ccc;  /* for mozilla*/ -webkit-box-shadow: 3px 4px 5px 6px #ccc; /* for chrome and safari */ box-shadow:         3px 4px 5px 6px #ccc; /* 1.  3px - The horizontal offset (The X-coordinate) 2.  4px - The vertical offset (The y-coordinate) 3.  5px - The blur radius (optional) 4.  6px - The spread radius (optional) 5.  #CCC - Color */

11. CSS3 text-shadow

1 2 3 4 5 6 7 8

text-shadow: 1px 2px 3px #000; /* 1.  1px - The horizontal offset (The x-coordinate) 2.  2px - The vertical offset (The y-coordinate) 3.  3px - The blur radius (optional) 4.  #000- Color */

12. CSS3 transition

CSS3 Transitions allow property changes in CSS values to occur smoothly over a specified duration.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

-webkit-transition: background 0.3s ease;    /* chrome & safari */   -moz-transition: background 0.3s ease;      /* Mozilla */   -o-transition: background 0.3s ease;       /* opera */   transition: background 0.3s ease; /* insted of */ transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; /* 1.  background  - transition-property: The property to be transitioned (in this case, the background property): The property to be transitioned (in this case, the background property). 2.  0.3s - transition-duration (The y-coordinate) 3.  ease - transition-timing-function(optional) */

13. CSS3 Animation shorthand

animation: name duration timing-function delay iteration-count direction;

01 02 03 04 05 06 07 08 09 10 11 12 13

-moz-animation: myfirst 5s linear 2s infinite alternate;    /* Firefox: */ -webkit-animation: myfirst 5s linear 2s infinite alternate;  /* Safari and Chrome: */ -o-animation: myfirst 5s linear 2s infinite alternate;  /* Opera: */ animation: myfirst 5s linear 2s infinite alternate; /* insted of */ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;

14. Comma separated declarations

1 2 3

h1, h2, h3, h4, h5, h6 {     font-family:Helvetica, Verdana, sans-serif; }