Html CSS溢出不服从填充

我有一组需要设置样式的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。我已经达到了CSS技能的极限，任何帮助都将不胜感激。

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

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

.c1{
边框：1px纯红；
背景色：#C0；
填充：0 13px 0 13px；
}
.c1内部{
溢出：隐藏；
显示：块；
}
.c2{
边框：1px纯红；
背景色：#C0；
填充：0 13px 0 13px；
}
.c2内部{
溢出：隐藏；
}

我们想要这个

122333444455555666666777777788888888999999999


看起来像这样

122333444455555666666777777788888888999999999


但是不能改变html的结构谢谢。完全按照要求工作。。。如果您知道如何在最后一个完整字符的末尾剪切跨度中的文本。。。（不是特别重要，但值得一问）我认为如果你没有静态内容，那是不可能的。。。即使你有静态内容，不同的计算机、字体和浏览器也会使这变得更加复杂。
.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;
}