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

在我看來，你需要做的唯一的事情就是從這個規則

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

替換您#content td:before這個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; 
} 

然後加入這個CSS -

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

最後加一個類wrapword您tbody這樣的 -

<tbody class="wrapword"> 

這裏的jsfiddle