CSS {word-wrap: break-word} 在 :before 选择器中不起作用

Question

我用的是responsive table solution found here.

我添加了 word-wrap: break-word，但它不适用于下面的 table：

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;">0</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save </span></td>
<td>Fortnightly 1 x 60 minutes session for 11 weeks at <span style="color: #ff0000;">0</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save </span></td>
</tr>
<tr>
<td>1 x 90 minutes session weekly for 6 weeks at&nbsp;<span style="color: #ff0000;">0</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save </span></td>
<td>Fortnightly 1 x 90 minutes session for 11 weeks at <span style="color: #ff0000;">0</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save </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

用这个 css -

替换你的 #content td:before

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

最后添加一个 class wrapword 到你的 tbody 像这样 -

<tbody class="wrapword">

这里是jsfiddle

Answer 2

据我所知，您唯一需要做的就是从这条规则中删除 white-space: nowrap;

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

CSS {word-wrap: break-word} 在 :before 选择器中不起作用

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

css

word-wrap