Question

我可以显示文本的空间非常有限，我想隐藏任何其他内容，而不是换行，滚动或使父div溢出。

在这种情况下，我的文本位于锚标记内，因此我做了一个小组件来举例说明我想在这里做的事情：

function App () {
  return (
    <div style={{ width: 100, border: 'solid 1px black'}}>
      <a style={{ overflow: 'hidden'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  mountNode
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

无论如何，我如何隐藏所有多余的文本，以使定位标记的文本内容保持一行？

Answer 1

将溢出隐藏在div上，并在链接上添加空白字符，而无需换行

function App () {
  return (
    <div style={{overflow: 'hidden', width: 100, border: 'solid 1px black'}}>
      <a style={{ whiteSpace:'nowrap'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  mountNode
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

Answer 2

您缺少white-space: nowrap和display: block。

1）white-space: nowrap防止换行。

2）display: block确保锚点继承其父级的宽度，而不是其文本的宽度。

div {
  width: 100px;
  border: 1px solid black;
}

a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* optional */
  display: block;
}

<div>
  <a>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>

Answer 3

您可以使用css溢出属性“隐藏”。

<div style="overflow:hidden; width:100px; height: 100px; border: 1px solid black">hide any text that would cross the parent divs border instead of line breaking to make it longer</div>

隐藏额外的文字，而不是滚动或溢出父div

3 个答案: