如果太长而没有包装，如何在容器内保持文本可见

Question

我有这样的结构：

td {
  height: 50px;
}

.box {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid black;
}

.content {
  position: relative;
  background-color: red;
  height: 30px;
}

.line {
  background-color: green;
  height: 10px;
}

<div style="padding: 20px;">
  <div class="box">
  <table style="width: 100%; overflow: hidden;">
    <tbody>
      <tr style="background-color: yellow;">
        <td>
          <div class="content" style="left: 20%">
            <div class="line" style="width: 30%"></div>
            <div>
              <span>Some text</span>
            </div>
          </div>      
        </td>
      </tr>
      <tr style="background-color: blue;">
        <td>
          <div class="content" style="left: 60%">
            <div class="line" style="width: 30%"></div>
            <div>
              <span>Some more text</span>
            </div>
          </div>      
        </td>
      </tr>
      <tr style="background-color: orange;">
        <td>
          <div class="content" style="left: 80%">
            <div class="line" style="width: 30%"></div>
            <div>
            <span>Some long text that should be bumped to the left to remain visible</span>
            </div>
          </div>      
        </td>
      </tr>
    </tbody>
  </table>
    
  </div>
</div>

https://jsfiddle.net/je78nz93/

绿线需要相对于其所包含的td进行定位。 黑框应与上面的绿线保持对齐，文本在黑框后面。 如果文本太长，则需要将黑色框移动到左侧以保持可见。

请帮我找到一个优雅的解决方案。

Answer 1

我已经更新了代码。但是，它没有响应。

＆＃13;

＆＃13;

com.[my-company].[my-project].managers

＆＃13;

td {
  height: 50px;
}

.box {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid black;
}

.content {
  position: absolute;
  right: 0%;
  background-color: red;
  height: 30px;
  white-space: nowrap;
}

.line {
  background-color: green;
  height: 10px;
}

.tdContainer {
  position: relative;
  width: 100%;
  height: 30px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用margin代替position

• edit

  • 已删除： float跨越长文本的范围。

  • 已插入：或使用inline-block和direction。可能会对标点产生一些影响。

  • <强> end edit

• 使用vw单位设置.line＆＃39; s width

仍然，我没有达到这种布局的目的:(

＆＃13;

＆＃13;

td {
  height: 50px;
}

.box {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid black;
}

.content {
  position: relative;
  background-color: red;
  height: 30px;
}

.line {
  background-color: green;
  height: 10px;
  width:30vw;
}

tr  span {
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  direction:rtl;
}

＆＃13;

<div style="padding: 20px;">
  <div class="box">
  <table style="width: 100%;overflow:hidden; ">
    <tbody>
      <tr style="background-color: yellow;">
        <td>
          <div class="content" style="margin-left: 20%">
            <div class="line"></div>
            <div>
              <span>Some text</span>
            </div>
          </div>      
        </td>
      </tr>
      <tr style="background-color: blue;">
        <td>
          <div class="content" style="margin-left: 60%">
            <div class="line"></div>
            <div>
              <span>Some more text</span>
            </div>
          </div>      
        </td>
      </tr>
      <tr style="background-color: orange;">
        <td>
          <div class="content" style="margin-left: 80%">
            <div class="line"></div>
            <div>
            <span>Some long text that should be bumped to the left to remain visible</span>
            </div>
          </div>      
        </td>
      </tr>
    </tbody>
  </table>
    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/je78nz93/2/