截断文本溢出但为按钮留出空间答案

【问题标题】：Truncate text overflow but leaving space for button截断文本溢出但为按钮留出空间
【发布时间】：2020-05-16 12:00:56
【问题描述】：

我想用点和按钮元素截断 td 元素内的文本溢出。我无法在行尾留出足够的空间来显示剪贴板按钮。下面是我对 HTML/CSS 的尝试：

table,
tr,
td {
  border: 1px solid black;
}

table {
  table-layout: fixed;
  width: 100%;
}

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<button>&#128203;</button>
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<button>&#128203;</button>
    </td>
  </tr>
</table>

我还尝试从我的 HTML 中删除按钮元素，以便可以通过 JavaScript 插入省略号和按钮元素。在插入它们之前，我不确定如何确定截止长度。以下是我对 JavaScript 的尝试：

(function addEllipsis(){
  const eles = document.getElementsByTagName('td');
  for (let i = 0; i < eles.length; ++i){
    eles[i].innerHTML = eles[i].textContent.slice(0, -/*magic number*/) + '&#8230;<button>&#128203;</button>';
  }
})();

【问题讨论】：

标签： javascript css html-table

【解决方案1】：

您可以像这样在 div 中包含一些父组件。并添加父组件 display:flex。

table,
tr,
td {
  border: 1px solid black;
}

table {
  table-layout: fixed;
  width: 100%;
}

td div {
  display: flex;
  align-items: center;
}

td div p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button{
 width:30px;
 height:30px;
}

<table>
  <tr>
    <td>
      <div>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <button>&#128203;</button>
      </div>
    </td>
    <td>
      <div>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <button>&#128203;</button>
      </div>
    </td>
  </tr>
</table>

【讨论】：