Question

我正在使用Bootstrap。

我正在尝试在与我的内容相同的行中显示“查看”按钮（带有左侧类的div）。我希望内容应该显示在同一行中，如果内容溢出，则应使用...显示text-overflow: ellipsis

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

这使内容与按钮重叠。我希望输出类似于：https://gyazo.com/5f37b6ffe33163be0dbee22272eea0f0

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

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

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

Answer 1

另一种获得所需输出的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

防止内容与按钮重叠

1 个答案: