A veces queremos mostrar el texto en nuestra página web evitando que el texto ocupe más de una línea o algo que detenga el ajuste de palabras. Se puede hacer agregando fácilmente algunos atributos en el archivo sass .
Enfoque: Comenzamos creando un archivo HTML simple al que agregaríamos texto en el cuerpo usando la etiqueta <p>. Luego cree un archivo sass y asígnele el nombre «estilo». La extensión de este archivo es “.scss”. Ahora agregaremos el código que evitará que ocupe más de 1 línea. Aquí usaremos 2 atributos llamados espacio en blanco y desbordamiento. El valor del espacio en blanco sería nowrap y el valor del desbordamiento estaría oculto. Después de hacer esto, guardaremos el archivo y lo convertiremos en un archivo CSS usando cualquier compilador sass. Si está utilizando Visual Studio Code, puede instalar una extensión llamada «Live Sass Compiler» que hará el trabajo por usted. Finalmente, vincularemos nuestro archivo CSS en la etiqueta principal del archivo HTML que creamos anteriormente.
Atributos utilizados:
- espacio en blanco: ayuda a establecer cómo se manejan los espacios en blanco y los saltos de línea dentro del texto del elemento.
- desbordamiento: controla lo que sucede con el contenido que es demasiado grande para caber en su contexto de formato de bloque.
Estableceremos el valor de los atributos:
- “ nowrap ” al atributo de espacio en blanco que colapsa los espacios en blanco en uno pero suprime los saltos de línea.
- » oculto» al atributo de desbordamiento que recorta el desbordamiento y el resto del contenido se hará invisible.
A continuación se muestra el código para el archivo style.scss :
div {
white-space: nowrap;
overflow: hidden;
}
Compílelo y conviértalo en css usando cualquier Sass Compiler . Habría un nuevo archivo creado en la misma carpeta llamado style.css . Ahora, vincule el archivo al html.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!--Linked the css file which was compiled using the Sass compiler--> <link rel="stylesheet" href="style.css"> </head> <body> <div> HTML Introduction: HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. </div> </body> </html>
Producción:
