CSS 溢出不服从填充

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

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

Answer 1

一个简单的修复。最重要的一点：您可以使跨度具有块显示值而不是内联显示值，这是它的默认值。

这是您需要的相关 CSS 和一个有效示例：

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

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!

CSS 溢出不服从填充

CSS overflow not obeying padding

html

css

overflow

padding