En este artículo, aprenderemos cómo envolver un texto en una etiqueta <pre>. La etiqueta <pre> se utiliza para mostrar el bloque de texto preformateado que conserva los espacios de texto, los saltos de línea, las tabulaciones y otros caracteres de formato que los navegadores web ignoran. De forma predeterminada , la etiqueta <pre> no es compatible con la etiqueta <pre>. En el caso de texto grande representado de forma prescrita, los navegadores web muestran una barra de desplazamiento horizontal. El usuario se enfrenta a un problema al leer toda la línea parte por parte.
Acercarse:
- Primero, creamos un documento HTML que contiene una etiqueta <pre>.
- Ahora, use la propiedad CSS overflow-x establecida en «auto», que agrega la barra de desplazamiento automáticamente cuando el contenido se desborda.
- Establezca la propiedad de espacio en blanco en «preenvolver».
- Por último, utilice la propiedad word-wrap principal que se establece en «break-word» para que las palabras que excedan el ancho del contenedor se dividan arbitrariamente para que quepan dentro de los límites del contenedor.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#gfg {
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 15px;
}
pre {
overflow-x: auto;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<b>
How to wrap a text in a <pre> tag?
</b>
<h3>
Before content wrap
</h3>
<pre>
GeeksforGeek,A Computer Science Portal
for Geeks. The best courses provided
here are best to learn and gain a lot
of knowledge related to computer science.
</pre>
<h3>
After content wrap
</h3>
<!-- html pre tag starts -->
<pre id="gfg">
GeeksforGeek,A Computer Science Portal
for Geeks. The best courses provided
here are best to learn and gain a lot
of knowledge related to computer science.
</pre>
<!-- html pre tag ends -->
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA