Fatal编程技术网
  • css/
  • Css 表TD在调整大小时不剪切内容

Css 表TD在调整大小时不剪切内容

css

Css 表TD在调整大小时不剪切内容,css,Css,以这把小提琴为例： 桌子{ 宽度：100%； } td{/*应尽可能严格遵守所有决议*/ 宽度：5%； } .fixedWidth1{/*应始终为90px或更小*/ 最大宽度：90px； } .固定宽度1 img{ 宽度：100%； 高度：自动； } .dynWidth{/*应始终占用所有剩余宽度，但如果屏幕宽度小于表格宽度，则应将其剪切*/ 溢出：隐藏； 文本溢出：省略号； 最大宽度：60% } .dynWidth>a{ 显示：块； } .dynWidth>span{ 显示：内联； } 可乐

以这把小提琴为例：


桌子{
宽度：100%；
}
td{/*应尽可能严格遵守所有决议*/
宽度：5%；
}
.fixedWidth1{/*应始终为90px或更小*/
最大宽度：90px；
}
.固定宽度1 img{
宽度：100%；
高度：自动；
}
.dynWidth{/*应始终占用所有剩余宽度，但如果屏幕宽度小于表格宽度，则应将其剪切*/
溢出：隐藏；
文本溢出：省略号；
最大宽度：60%
}
.dynWidth>a{
显示：块；
}
.dynWidth>span{
显示：内联；
}
可乐
可乐
可乐
可乐
可乐
可乐6
此列还包含其他元素，但它们不是问题。这个专栏的问题是它没有收缩！如果表格的可用空间缩小，我希望它能切掉文本。
应该调整大小
应该调整大小
应该调整大小
应该调整大小
我知道我可以通过使用table layout:fixed来调整表的宽度。但使用这种方法，它将无法正确缩放。我希望这张桌子反应灵敏。这是主要问题。另一个事实是，除前两列外，所有TD、TH元素对于所有分辨率都应尽可能紧密。第一列设置了明确的像素宽度，第二列应调整为所有可用的剩余宽度

这在大分辨率下效果很好，但当可用宽度减小时，第二列中的文本会阻止表格缩小

是否有一种方法可以使溢出实际上切断文本，以便表格可以缩小到任何大小

表格布局：固定的
是解决方案，如果删除
宽度：100%
，则不应“正确缩放”


table {
    /* width:100%; */
    table-layout:fixed;
}


你的

正在覆盖
.fixedWidth1
表格单元格的最大宽度

删除该选项并添加：


.dynWidth {
    word-break:break-word;
}







table {
    /* width:100%; */
    table-layout:fixed;
}


你的

正在覆盖
.fixedWidth1
表格单元格的最大宽度

删除该选项并添加：


.dynWidth {
    word-break:break-word;
}




.
给你


<html>
        <head>        
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    table {
        width: 100%;
    }
    .fixed_width {
        max-width: 90px;
    }
    .fixed_width img {
        width: 100%;
        height: auto;
    }
    .dyn_width a{   
        word-break:break-word;  
    }
    </style>
        </head>
        <body>
    <table border ='1'>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col6</th>
        </tr>
        <tr>
            <td class="fixed_width" ><a href="#"><img src="category.png" /></a></td>
            <td width="300" class="dyn_width">
                <a href="#">A.Way.Too.Large.Text.Which.Cannot.Be.Broken.up.This.ruins.my.entire.layout </a><br/>
                <span>This column also contains other elements, but they are not a problem. The problem with this column, is that it does not shrink! I want it to cut off text if the space available to the table shrinks.</span>
            </td>
            <td>Should resize</td>
            <td>Should resize</td>
            <td>Should resize</td>
            <td>Should resize</td>
        </tr>
    </table>
        </body>
     </html>




*{
边际：0px；
填充：0px；
}
桌子{
宽度：100%；
}
.固定宽度{
最大宽度：90px；
}
.固定宽度img{
宽度：100%；
高度：自动；
}
.dyn_宽度a{
断字：断字；
}
可乐
可乐
可乐
可乐
可乐
可乐6


此列还包含其他元素，但它们不是问题。这个专栏的问题是它没有收缩！如果表格的可用空间缩小，我希望它能切掉文本。
应该调整大小
应该调整大小
应该调整大小
应该调整大小

给你


<html>
        <head>        
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    table {
        width: 100%;
    }
    .fixed_width {
        max-width: 90px;
    }
    .fixed_width img {
        width: 100%;
        height: auto;
    }
    .dyn_width a{   
        word-break:break-word;  
    }
    </style>
        </head>
        <body>
    <table border ='1'>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col6</th>
        </tr>
        <tr>
            <td class="fixed_width" ><a href="#"><img src="category.png" /></a></td>
            <td width="300" class="dyn_width">
                <a href="#">A.Way.Too.Large.Text.Which.Cannot.Be.Broken.up.This.ruins.my.entire.layout </a><br/>
                <span>This column also contains other elements, but they are not a problem. The problem with this column, is that it does not shrink! I want it to cut off text if the space available to the table shrinks.</span>
            </td>
            <td>Should resize</td>
            <td>Should resize</td>
            <td>Should resize</td>
            <td>Should resize</td>
        </tr>
    </table>
        </body>
     </html>




*{
边际：0px；
填充：0px；
}
桌子{
宽度：100%；
}
.固定宽度{
最大宽度：90px；
}
.固定宽度img{
宽度：100%；
高度：自动；
}
.dyn_宽度a{
断字：断字；
}
可乐
可乐
可乐
可乐
可乐
可乐6


此列还包含其他元素，但它们不是问题。这个专栏的问题是它没有收缩！如果表格的可用空间缩小，我希望它能切掉文本。
应该调整大小
应该调整大小
应该调整大小
应该调整大小

谢谢你，但你的小提琴不行（至少在firefox中不行）。第二列仍然显示它的全部内容，并防止表向下扩展。它不起作用，因为Firefox将您的“A.Way.Too.Large…”视为一个词。因此，它并没有违背诺言。你可以做的是添加
单词break:break all，但只有当某个单词可能会复制此问题时，您才应该这样做。非常感谢。“全力以赴”在这里成功了-谢谢你，但你的小提琴不起作用（至少在firefox中不起作用）。第二列仍然显示它的全部内容，并防止表向下扩展。它不起作用，因为Firefox将您的“A.Way.Too.Large…”视为一个词。因此，它并没有违背诺言。你可以做的是添加
单词break:break all，但只有当某个单词可能会复制此问题时，您才应该这样做。非常感谢。“全力以赴”在这里成功了-D