Question

我有一组HTML元素，我需要设置样式，我无法以任何方式更改结构（是的，我知道）。

HTML有一个包含两个嵌套跨度的div。 div有填充，溢出被隐藏。 div的宽度以编程方式设置并应用为内联样式。

我希望内部跨度中包含的文本被剪切，但仍保留包含div中指定的右手填充。

经过一些研究，似乎标准方法是使用第二个嵌套div，但正如我所提到的，我无法改变HTML的结构。

目前我有：

<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
  <span class="c1-inner">
      <span class="c1-inner-2">
          122333444455555666666777777788888888999999999
      </span>
  </span>
</div>

<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
  <div class="c2-inner">
      122333444455555666666777777788888888999999999
  </div>
</div>

由以下CSS设计：

.c1 {
  border: 1px solid red;
  border-radius: 4px;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
  overflow: hidden;
}
.c1-inner {
  // No relevant styles here yet
}

.c1-inner-2 {
  // No relevant styles here yet
}


.c2 {
  border: 1px solid red;
  border-radius: 4px;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
}

.c2-inner {
  overflow: hidden;
}

A jsFiddle is available here

我需要设置顶部“按钮”的样式，使其看起来像第二个只使用CSS。我已经达到了CSS技能的极限，非常感谢任何帮助。

Answer 1

一个简单的修复。最重要的一点：你可以使span的显示值为block而不是inline，这是默认值。

这里是您需要的相关CSS和一个工作示例：

＆＃13;

.c1 {
  border: 1px solid red;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
}
.c1-inner {
  overflow: hidden;
  display: block;
}

.c2 {
  border: 1px solid red;
  background-color: #c0c0c0;
  padding: 0 13px 0 13px;
}

.c2-inner {
  overflow: hidden;
}

＆＃13;

We want this<br>

<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
  <span class="c1-inner">
      <span class="c1-inner-2">
          122333444455555666666777777788888888999999999
      </span>
  </span>
</div>



<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
  <div class="c2-inner">
      122333444455555666666777777788888888999999999
  </div>
</div>
<br>
but cannot change the structure of the html!

＆＃13;

CSS溢出不遵守填充

1 个答案: