CSS {word-wrap：break-word}は動作しません：セレクタの前に

Question

responsive table solution found hereを使用しました。

私はword-wrap: break-wordを追加しましたが、それは以下の表のために働いていません。

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; 
    } 
} 

ヘルプありがとうございます。

Answer 1

私はそれを見ると、あなたがする必要がある唯一のものは、感謝Rehban

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 */ 
} 

Answer 2

あなたのこのCSSで#content td:before置き換え -

.wrapword{ 
    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+ */ 
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ 
    white-space: normal; 
} 

そして最後に、このようなあなたのtbodyにクラスwrapwordを追加 - - そして、このCSSを追加

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

を

<tbody class="wrapword"> 

をここですjsfiddle