应用 css 样式使文本完全可见

Question

在这种情况下，是否可以将 css 样式应用于 inner class，以便完全显示文本（内部 div 比其父级宽).

HTML:

<div class="main">
  <div>
    1111111
  </div>
  <div class="inner">
    dds adg asdg asdg
  </div>
  <div>
    22222
  </div>
</div>

CSS:

.main {
  border:1px solid red;
  width: 50px;
  overflow: hidden;
}
.inner{
  height: 40px;
  border:2px solid green;
  margin-right: -10px;
}

jsFiddle

因此，.inner 的任何更改（不应更改高度：40 像素），以便通过 [=39] 使文本完全显示在两行中=] 右边宽一点？

不允许更改主要 class 的 html 结构或 CSS 样式。

很遗憾，不允许滚动。一切都应该看起来一样，但内部 div 显示两行文本（内部 div 看起来更宽）。

Answer 1

抱歉，如果这不符合您的所有要求，但就我所分享的示例而言，希望它有所帮助。

.relative-wrap {
    position: relative;
}
.main {
  border:1px solid red;
  width: 50px;
  overflow: hidden;
  height: 80px;
}
.inner{
  height: 40px;
  border:2px solid green;
  margin-right: -50px;
  position: absolute;
  width: 100px;
  background: white;
}
.textdown {
  line-height: 110px;
}

<div class="relative-wrap">
  <div class="main">
    <div>
      1111111
    </div>
    <div class="inner">
      dds adg asdg asdg
    </div>
    <div class="textdown">
      22222
    </div>
  </div>
</div>

Answer 2

您有向主元素添加overflow-x: scroll;或auto，并为子元素添加固定宽度。我想不出只有将 CSS 更改为 inner:

才能做到这一点

https://jsfiddle.net/66uqoLy0/1/

应用 css 样式使文本完全可见

apply css styles to make the text fully visible

html

css

margin

z-index