Question

我是新来的反应者。因此，非常感谢您的帮助。我有一个反应表，其中的一列包含每一行的名称。我有“ entry”，“ entry（1）”，...“ entry（n）”之类的名字我希望能够在名称很长时处理文本溢出，但是我想保留名称的索引，因此不能使用CSS（文本溢出：“省略号”

有没有办法让我“ ent ...（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>

如何截断带有中间省略号的react元素中的溢出文本？

1 个答案: