Search code examples
cssword-wrap

CSS {word-wrap: break-word} won't work in :before selector

I used the responsive table solution found here.

I added word-wrap: break-word, but it is not working for the table below:

enter image description here

jsfiddle

HTML:

<div id="content">
<table>
<tbody>
<tr>
<td><strong>MTP 1: Acute Symptomatic</strong></td>
<td><strong>MTP 2: Acute and Chronic Symptomatic</strong></td>
</tr>
<tr>
<td>1 x 60 minutes session weekly for 6 weeks at <span style="color: #ff0000;">$420</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $60</span></td>
<td>Fortnightly 1 x 60 minutes session for 11 weeks at <span style="color: #ff0000;">$450</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $30</span></td>
</tr>
<tr>
<td>1 x 90 minutes session weekly for 6 weeks at&nbsp;<span style="color: #ff0000;">$630</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $60</span></td>
<td>Fortnightly 1 x 90 minutes session for 11 weeks at <span style="color: #ff0000;">$660</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $30</span></td>
</tr>
</tbody>
</table>
</div>

CSS:

#content table tbody {border-top: 1px solid #ccc;}
#content table tr:nth-of-type(odd) {
    background: #eee;
}
#content tr td {
    line-height: 1.5em;
}
@media only screen and (max-width: 500px) {
  #content td:nth-of-type(1):before { content: "MTP 1: Acute Symptomatic"; word-wrap: break-word;}
  #content td:nth-of-type(2):before { content: "MTP 2: Acute and Chronic Symptomatic"; word-wrap: break-word;}

    #content table tr:nth-of-type(odd) {
        background: transparent;
    }

    /* Force table to not be like tables anymore */
    #content table, #content thead, #content tbody, #content th, #content td, #content tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #content thead tr, #content tr:nth-of-type(1) { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #content tr { border: 1px solid #ccc; }

    #content td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        width: 50%;
        max-width: 50%;
        min-height: 39px;
        line-height: 1.5em;
    }
    #content #post-4818 td:nth-of-type(1) {
        background-color: #FFC384;
    }

    #content td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }  
}

Help appreciated.

Solution

  • As I see it, the only thing you need to do is to remove the white-space: nowrap; from this rule

    Updated fiddle

    #content td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    /*  white-space: nowrap;          commented out    */
}