html - 防止内容与按钮重叠

Question

我正在使用 Bootstrap。

我试图在与我的内容相同的行中显示“查看”按钮(类为 pull-left 的 div)。我希望内容应该显示在同一行中，如果它溢出，它应该显示为 ... 使用 text-overflow: ellipsis

为了显示按钮，我必须使用 position: absolute;

这使得内容与按钮重叠。我想要类似这样的输出:https://gyazo.com/5f37b6ffe33163be0dbee22272eea0f0

这样它应该适用于所有屏幕尺寸。因此它应该自动添加 ... 而无需在所有屏幕尺寸中重叠按钮。

这是我的 jsfiddle:https://jsfiddle.net/k9owzuw9/

请注意:我需要使用表格本身以及同一列中的内容和按钮 (td)。

Answer 1

还有另一种方法可以获得所需的输出。

.shorten {
      width: 400px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body, html {
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.full-width{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overlay-button{
  position:absolute;
  right:0;
}

<table>
  <tr>
    <td>
        <div class="pull-left full-width shorten">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in justo vehicula, efficitur tortor quis, condimentum massa. Aliquam ut luctus arcu, iaculis lacinia ex. Aliquam sodales auctor augue sit amet iaculis. Praesent lacinia nunc id tortor suscipit, ut vulputate lacus ultrices. Quisque volutpat ultrices ultrices. In mollis et dolor a pellentesque. Nam ac cursus dui. Nulla facilisi. In hac habitasse platea dictumst. Curabitur faucibus pretium tellus, quis suscipit purus varius nec. Proin ut tellus tortor. 
        </div>
        <div class="pull-right overlay-button">
          <button class="btn btn-xs btn-primary">
            View
          </button>
        </div>
        <div class="clearfix">
        </div>        
    </td>
  </tr>
</table>