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?
3 respuestas
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>
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>
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>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.