How to wrap text in table cell at hyphen?


Tags: css,table,line-breaks,textwrapping,css-tables

Problem :

I found the text-wrap and overflow-wrap CSS 3 properties, but they don't seem to do anything.

http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

How to wrap text at hyphens within a table cell? Testing on Chrome 14.



Solution :

You must use table-layout:fixed. Tested in Chrome 15 and IE7.

HTML:

<table>
  <tbody>
    <tr>
      <td>htqdrs-sdfwwwf-dfaaa-com-bbb-ccc-ddd-eee-fff-kljdfgg</td>
    </tr>
  </tbody>
</table>

CSS:

table {    
    table-layout:fixed;
    width : 50px;
    border : 1px solid #000;    
    word-wrap : break-word;
}
td {
    width : 50px;
}

JS Fiddle: http://jsfiddle.net/9ZjCy/1/


    CSS Howto..

    How to check if css box-shadow is supported (jQuery)?

    How to align image with text in a table ? (jquery datatable sort image with text in table header)

    How do I get two divs next to eachother, but spaced?

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    Can't Figure Out How to Fix CSS Width

    How to extract CSS styles using Scrapy

    simple text input box “autosuggest” script - how to overlap with css

    How to place div in top right hand corner of page

    How to use “two-toned” font variants in CSS?

    How do I center a container in my HTML/CSS?

    How do I combine two columns with different formatting?

    How to animate X number of divs using CSS and javascript?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How can I get a CSS class selector to override the input[readonly] selector?

    How to not apply CSS file on a
    ? (Without changing the original CSS file.)

    how to display php search engine execution time and number of results before the results

    How do you close the CSS preview view in Eclipse?

    How do I add another css to Bootstrap?

    How to have logo go into / overlay black bar along the top of screen?

    How to convert HTML button to HTML input, while keeping all CSS?

    How to hide table row overflow (take 2)

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How to control dojo widget classes, or how to get fine-grained control of style

    How to build a simple CSS layout that expands to the viewport?

    How to use one single png image to create multiple website buttons (and their hovers)

    How can I make an unclickable HTML “Ghost” Div?

    How to use CSS media query to scale background-image to viewing window

    How to get an image to resize on scroll?

    Css tool, to calculate how many (in bytes) inline css in html

    CSS - How to make if “Firefox, Safari, Opera and IE”?