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

Is it possible to apply css styles to the inner class in this case so that the text is fully displayed (inner div is wider than it's parent).

在本例中，是否可以将css样式应用于内部类，以便充分显示文本(内部div比父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

So, any changes for .inner (height: 40px should NOT be changed) so that the text is fully displayed in two lines by making that div a bit wider to the right?

因此，对于.inner (height: 40px)的任何更改都不应该更改)，从而使该div更宽一些，从而完全显示在两行中?

Changing the html structure or CSS styles for main class are not allowed.

更改主类的html结构或CSS样式是不允许的。

Unfortunately, scroll is not allowed. Everything should look the same, but the inner div display text in two lines (inner div to look wider).

不幸的是，滚动是不允许的。所有的东西看起来都一样，但是内div显示文本的两行(内div看起来更宽)。

2 个解决方案

#1

Sorry if this doesn't comply with all your requirements but it's as far as I got bearing the example you shared, hope it helps.

对不起，如果这不能满足您的所有要求，但是我已经有了您共享的示例，希望它有帮助。

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

#2

You have to add overflow-x: scroll; or auto to the main element, and a fixed width to the child. I can think of no way to do it with only changing the CSS for inner:

你必须添加overflow-x: scroll;或自动到主元素，并固定宽度给孩子。我想不出任何方法只需要改变内部的CSS:

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

#1