Saya memiliki ruang yang sangat terbatas di mana saya dapat menampilkan teks, dan saya ingin menyembunyikan sesuatu yang ekstra daripada melakukan jeda baris, menggulir, atau membanjiri div induk.

Dalam hal ini teks saya ada di dalam tag jangkar, jadi saya membuat komponen kecil untuk mencontohkan apa yang ingin saya lakukan di sini:

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>

Bagaimanapun, bagaimana cara menyembunyikan semua teks tambahan itu untuk menjaga konten teks dari tag jangkar hanya satu baris?

0
theJuls 25 Oktober 2019, 21:47

3 jawaban

Jawaban Terbaik

Anda kehilangan white-space: nowrap dan display: block.

1) white-space: nowrap mencegah pembungkusan baris.

2) display: block memastikan jangkar mewarisi lebar induknya, bukan lebar teksnya.

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 Oktober 2019, 18:53

Anda dapat menggunakan properti css overflow "tersembunyi".

<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 Oktober 2019, 18:51

Pindahkan overflow yang disembunyikan ke div dan tambahkan whiteSpace tanpa bungkus ke tautan

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 Oktober 2019, 18:51