Скрыть дополнительный текст вместо прокрутки или переполнения родительского div

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>

В любом случае, как мне скрыть весь этот дополнительный текст, чтобы текстовое содержимое тега привязки оставалось одной строкой?

javascript css reactjs

0

theJuls 25 Окт 2019 в 21:47

Answer 1

Вы скучаете по 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>

2

junvar 25 Окт 2019 в 18:53

Answer 2

Вы можете использовать свойство переполнения 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>

1

JoshuaD 25 Окт 2019 в 18:51

Answer 3

Переместите переполнение, скрытое в div, и добавьте whiteSpace без переноса к ссылке

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>

3

Willman.Codes 25 Окт 2019 в 18:51

Скрыть дополнительный текст вместо прокрутки или переполнения родительского div

3 ответа

Похожие вопросы

Новые вопросы

javascript