Ocultar texto adicional en lugar de desplazar o desbordar div principal

Question

Tengo un espacio muy limitado donde puedo mostrar texto, y me gustaría ocultar cualquier cosa adicional en lugar de hacer un salto de línea, desplazar o desbordar div principal.

En este caso, mi texto está dentro de una etiqueta de anclaje, así que hice un pequeño componente para ejemplificar lo que quiero hacer aquí:

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>

De todos modos, ¿cómo oculto todo ese texto adicional para mantener el contenido del texto de la etiqueta de anclaje solo en una línea?

javascript css reactjs

0

theJuls 25 oct. 2019 a las 21:47

Answer 1

Te faltan white-space: nowrap y display: block.

1) white-space: nowrap evita el ajuste de línea.

2) display: block asegura que el ancla herede el ancho de su padre, en oposición al ancho de su texto.

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 oct. 2019 a las 18:53

Answer 2

Puede usar la propiedad de desbordamiento de CSS "oculta".

<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 oct. 2019 a las 18:51

Answer 3

Mueva el desbordamiento oculto al div y agregue whiteSpace sin ajuste al enlace

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 oct. 2019 a las 18:51

Ocultar texto adicional en lugar de desplazar o desbordar div principal

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript