Блог

Я пытаюсь получить кнопку редактирования рядом с текстом пункта в моем div. То, что я пробовал до сих пор, вставлено в мое перо. Я поместил тег a внутри пункта, но я знаю, что это неправильный подход.

 <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

Измените некоторые 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