Question

问题：在一种嵌入式样式中，“overflow：hidden”工作正常，而在另一种类型的嵌入式样式中则没有。

Here是CSSDesk代码（截至本文撰写时，jsfiddle无效）。

背景：在我的项目中，我必须使用HUGE表来显示来自db的变量 - 每页最多75个变量。我尽力使用divs，但我浪费了20个小时，最终，我回到了桌子上（对于CSS纯粹主义者，我道歉）。

在我的一些td中，数据有点长，需要“隐藏”（在这种特殊情况下无关紧要，因为数据只是“预览”）。我在网上搜索过，并做了一个实验，其中唯一可以使用“隐藏”的样式元素是div（我在实验中尝试过tds和span，它们不起作用）。

在一个td中，我想在左边放一个变量，在右边放另一个 - 大多数时候，两个都适合td，但是在一个很长的变量上，可以切掉一部分正确的变量。所以，我编写CSS和html，并设置div的样式，使它们符合我的标准 - 这些是上面提到的CSSDesk页面上面的两个tds。一切正常。

BUT！在过去的几个月里，我了解到可以在元素标识符的“类”部分“混合”多个样式（例如<td class="redcolor blueunderline">)，我发现在很多情况下使用它非常方便在页面上唯一的元素上添加“少量添加”，你必须重写/添加整个嵌入式样式或更改样式表（例如姓名，地址，电话号码，zip，你只想“大胆的“名字 - class="identifers" vs class="identifiers bold"） - 我想知道你们的专家是否做过类似的事情？

所以我玩了一下，除了“溢出：隐藏”之外，其中大部分都工作了。

对于CSSDesk示例中的左上角div，我使用这个CSS和html（它很棒）：

.leftdivclass {
   float:left;
   background-color:green;
   color:black;   
   border:2px solid yellow;   
   overflow:hidden;
   white-space:nowrap;
   width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>

对于CSSDesk示例中的右上角div，我使用这个CSS和html（它很棒）：

.rightdivclass {
   float:right;
   background-color:red;
   color:black;
   border:2px solid yellow;
   overflow:hidden;
   white-space:nowrap;
   width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>

对于CSSDesk示例中的左下div，我使用此CSS和html（一切正常，但“隐藏” - 注意数字突出）

.floatleft {
    float:left;}
.bgblue {
    background-color:blue;}
.bgred {
    background-color:red;}
.lcwhite {
    color:white;}
.lcblack {
    color:black;}
.border2y {
    border:2px solid yellow;}       
overflowhidden {
    overflow:hidden;}
.wsnowrap {
    white-space:nowrap;}
.width25pc {
    width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>

但是如果我使用相同的html并添加“style =”overflow：hidden“一切正常，就像在CSSDesk示例的右下方示例一样。

<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>

问题：

为什么包含“overflow：hidden”的单个嵌入式css样式有效，但是当它被解析为类命令的单个添加时它不起作用？如果我添加“style =”overflow：hidden“ - inline？
您是否曾经使用过这样的小型“课堂片段”？

再次，我提前感谢你。

Answer 1

您可以混合使用这些类。如果它节省了冗余，那很好。如果它混淆了类和容器类（即它们所在的父级），那么调试问题会很困难。

很可能它不起作用，因为它的父类或另一个类与overflow属性冲突。像style="overflow:hidden;"这样的内联样式几乎总是优先级最高，但请记住overflow的默认属性为visible.

如果您拨打2个班级，其中一个班级有overflow:hidden;，另一个班级overflow:visible;，那么您可能无法获得所需的效果。

请记住，像这样的选择器

#divid .divclass

将永远战胜

.divclass

将更优先处理。

另外，你试过吗

overflow:hidden !important;

往往优先于一切。希望有所帮助。

嵌入式溢出：仅隐藏部分工作

1 个答案: