javascript - 如何用中间省略号 chop react 元素中溢出的文本？

Question

我是新手。所以非常感谢任何帮助。我有一个 react 表，其中一列包含每一行的名称。我有像“条目”，“条目(1)”，...“条目(n)”这样的名字 我希望能够在名称很长时处理文本溢出，但我想保留名称的索引，因此不能使用 css (text-overflow:"ellipses"

有没有办法让我“输入... (n)”？

Answer 1

您可以结合使用 flexbox 和 position: absolute 来实现这一点。绝对位置防止 div 影响表格列的宽度，同时填充 td 的全宽。 flexbox 限制了文本区域的宽度，这使得省略号的外观成为可能:

const Entry = ({ children, index }) => (
  <div className="entry">
    <div className="entry__inner">
      <span className="entry__text">{children}</span>
      <span className="entry__index">({index})</span>
    </div>
  </div>
);

const Demo = ({ entries }) => (
  <table>
    <thead>
      <th>Name</th>
    </thead>
    <tbody>
      {entries.map((text, index) => (
        <tr key={index}>
          <td>
            <Entry index={index}>{text}</Entry>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

const entries = ['entry', 'long entry', 'long long entry'];

ReactDOM.render(
  <Demo entries={entries} />,
  demo
);

td {
  width: 5.5em;
}

.entry {
  position: relative;
  height: 1em;
}

.entry__inner {
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
}

.entry__text {
  flex: 1;
  margin-right: 0.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry__index {
  text-align: right();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="demo"></div>