En este artículo, veremos cómo evitar que el texto ocupe más de 1 línea usando las propiedades CSS, y entenderemos cómo implementarlo. Hay propiedades CSS específicas que se pueden aplicar para controlar o evitar los saltos de línea en un bloque de texto implementando las propiedades de espacio en blanco y desbordamiento. Las siguientes son las propiedades CSS que se pueden implementar, se describen a continuación:
- espacio en blanco : esta propiedad CSS se usa para establecer cómo se manejará el espacio en blanco interno del elemento. Al establecer esta propiedad en nowrap , el texto dentro del elemento será solo una línea, pero aun así, podría haber un desbordamiento de texto fuera de los límites del elemento.
- desbordamiento : este CSS establecerá el comportamiento del desbordamiento de un elemento, según sea necesario. Al establecer esta propiedad en hidden , el texto dentro del elemento permanecerá dentro de los límites del elemento.
- text-overflow (opcional): esta propiedad de CSS controla cómo se notifica a los usuarios sobre el contenido de desbordamiento oculto. Al establecer esta propiedad en puntos suspensivos , el texto de desbordamiento se señalará con tres puntos[…].
Nota: La propiedad de desbordamiento se puede configurar para desplazarse , pero luego evite el uso de la propiedad de desbordamiento de texto.
Ejemplo: El siguiente ejemplo muestra cómo puede evitar que su texto ocupe más de 1 línea usando las propiedades CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 20px;
}
div {
width: 500px;
height: 20px;
border: 2px red solid;
}
.property1 {
white-space: nowrap;
}
.property1and2 {
white-space: nowrap;
overflow: hidden;
}
.property1and2and3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
How to stop text from taking up more than 1 line?
</h3>
<div>
we will see how stop text from taking up more
than 1 line. In order to do so we will use
following css properties -
</div>
<h3>white-space Property</h3>
<div class='property1'>
The white-space property in CSS is used to
control the text wrapping and white-spacing
ie., this property can be used to set about
the handling of the white-space inside the elements.
There are several types of values in this
property to use.
</div>
<h3>overflow Property</h3>
<div class='property1and2'>
The CSS overflow controls the big content.
It tells whether to clip content or to add
scroll bars.
</div>
<h3>text-overflow Property</h3>
<div class='property1and2and3'>
A text-overflow property in CSS is used
to specify that some text has overflow
and hidden from view. The white-space property
must be set to nowrap and the overflow property must
be set to hidden.
</div>
</body>
</html>
Salida: La salida ilustra cómo se usa cada propiedad CSS para hacer texto largo en una sola línea.
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA