Question

我正在尝试在div中的para文本旁边获取编辑按钮。我到目前为止尝试过的内容都粘贴在笔中。我已经在para里面放了一个标签，但是我知道这不是正确的方法。

<div class="block-ellipsis">
  <p>This is an example of a multi-line ellipsis.This is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsis <a href="#" class="editbtn">Edit</a></p>

</div>

.block-ellipsis {
  background-color: rgba(204,204,204,0.4);
  display: block;
  display: -webkit-box;
  max-width: 50%;
  height: 43px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15px;
  position: relative;
}
    .block-ellipsis > p {
        max-width: 90%;
    }
.editbtn {
  position: absolute;
  right: 0;
  top: 20px;

CODEPEN

Answer 1

更改一些CSS

.block-ellipsis {
  background-color: rgba(204,204,204,0.4);
  display: block;
  display: -webkit-box;
  max-width: 50%;
  height: 43px;
  margin: 0 auto;

  font-size: 14px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  margin-bottom: 15px;
  position: relative;
}
    .block-ellipsis > p {
      max-width: 90%;
      padding-right:20px;
      white-space:nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position:relative;
    }
.editbtn {
  position: absolute;
  right: 0px;
  top: 0px;
}

https://codepen.io/anon/pen/rbGRNz

如何在para旁边显示span元素？

1 个答案: