相关疑难解决方法(0)

我观察到一种好奇心,当应用于表格单元格时,浏览器(至少:Chrome,Firefox和Safari)如何处理max-width和width属性:如果单元格包含一个巨大的单词,那么width如果它尝试,则该属性将不会被尊重将单元格的宽度设置为小于包含单词所需的宽度.

也就是说,如果我写这个HTML,其中第一个表width的100px为100px,第二个表的100px max-width为100px,并且都包含一个巨大的单词,那么第一个表格渲染得非常宽,第二个表格被限制为100px:

<style>
td {
    border: 1px solid; /* To help visualisation */
    word-wrap: break-word;
}
</style>
<table>
    <tr>
        <td style="width:100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
</table>
<table>
    <tr>
        <td style="max-width: 100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
</table>

为什么会这样？width在这种情况下应该受到尊重吗？是width和max-width浏览器之间的行为差​​异,还是由规范决定？在定义瞄了一眼width,并max-width在CSS 2级规范,CSS内在外在和浆纱模块级别3(下面的链接)似乎并没有立即表明在任何情况下都max-width应该得到尊重,但width忽视; 我错过了什么吗？

规格链接:

• https://www.w3.org/TR/CSS2/visudet.html#propdef-width
• https://www.w3.org/TR/CSS2/visudet.html#propdef-max-width
• https://drafts.c​​sswg.org/css-sizing-3/#propdef-width
• https://drafts.c​​sswg.org/css-sizing-3/#propdef-max-width

<div id="id_div_comments"><p>body4qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p></div><br/><br/>
</div>

css文件:

div#id_div_comments {
    width: 400px;
}

但是字符串/文本超出了分割宽度.当达到分区的宽度时,我该怎么做才能打破文本？

我有HTML和CSS,如http://jsfiddle.net/Lijo/Ydjde/所示

问题是div内的文本不限于div.它打破了div而且写了.我们如何使用以下功能将文本包装在div中？

•全文可读

•它不会破坏div

有没有办法在CSS 2.1中使用它？我相信自动换行是CSS 3.0的功能.

注意:我将宽度定义为宽度:100px; 宽度:30px; 对于第一和第二div

注意:跨度是从ASP.Net Label控件生成的.因此我们无法改变/替换跨度.问题是使用CSS解决.

 <span id="detailContentPlaceholder_Label1">25123456789</span>

参考:

1. HTML表格中的自动换行
2. div中的CSS自动换行
3. CSS3自动换行属性

如果我有一个很长的字符串(没有空格!).我可以强制浏览器对它进行换行,例如,td通过CSS 在表中.宽度似乎没有任何影响.

注意:我知道有人提交没有空格的长字符串是不太可能的,但你永远不会知道......

我试过了:

.gridrow td
{
    padding: 1em;
    text-align: center;
    word-wrap: break-word; 
}

我使用FF作为我的浏览器.word-wrap似乎只在CSS3中使用？

我的代码是这样的:

<div style="width: 300px;">
    <table width="100%" border="2px solid blue">
        <tr>
            <td style="width:30%">Player</td>
            <td style="width:30%">Club</td>
            <td style="width:30%">Country</td>
        </tr>
        <tr>
            <td style="width:30%">HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard</td>
            <td style="width:30%">Chelsea</td>
            <td style="width:30%">Belgium</td>
        </tr>
        <tr>
            <td>Ronaldo</td>
            <td>Real Madrid</td>
            <td>Portugal</td>
        </tr>
        <tr>
            <td>Messi</td>
            <td>Barcelona</td>
            <td>Argentina</td>
        </tr>
    </table>
</div>

结果是这样的:

我试图在列中添加width = 30%player,但它仍然不起作用.