sirve - Los valores de las etiquetas HTML<pre> obtienen barras de desplazamiento horizontal, ¿cómo formatearlas?
la herramienta zoom nos permite (5)
Esta es mi página de blog. Algunas de mis publicaciones tienen bloques de código C# . Para esto, uso <''pre''> etiquetas <''pre''> . pre ancho de la etiqueta pre es 100% y tiene un color de fondo. Sin embargo, el texto desapareció de él como en la imagen de abajo. ¿Cómo puedo superar esto? No quiero la barra de desplazamiento inferior.
Hay algunas soluciones:
Lo más sencillo es colocar saltos de línea en el texto. Sin embargo, es probable que esto no sea lo que usted desea, ya que dejará grandes márgenes derechos o aún causará barras de desplazamiento, a menos que la ventana del navegador sea del tamaño correcto.
Otra es usar white-space:pre-wrap; en el CSS para su etiqueta <pre> . Esto hará que el texto se ajuste a una nueva línea según sea necesario, pero aún así conservará todos los espacios en blanco presentes en la fuente. Consulte http://www.w3schools.com/cssref/pr_text_white-space.asp para obtener más información sobre esta propiedad de CSS.
Alternativamente, si no desea que se agreguen saltos de línea (ya sea manualmente o mediante ajuste automático de palabras), puede usar una de las siguientes propiedades CSS para su etiqueta <pre> :
-
overflow-x:hidden;Esto simplemente cortará el texto que se extiende más allá del borde derecho. No será visible en absoluto. -
overflow-x:scroll;Esto hará que aparezcan barras de desplazamiento dentro de su página web cuando el texto se extienda más allá del borde derecho. Esto evitará que toda la página se vuelva tan ancha que aparezcan barras de desplazamiento en la parte inferior. Consulte http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll para ver un ejemplo.
Podrías usar algunas propiedades CSS:
tag values get horizontal scroll bars,how to format it?">
añadir estilo:
pre {
white-space: pre-wrap;
word-break: break-word;
}
There are a few solutions:
The simplest is to place line breaks in the text. This probably is not what you want though, since it will either leave large right margins or still cause scroll bars, unless the browser window is just the right size.
Another is to use white-space:pre-wrap; in the CSS for your <pre> tag. This will cause the text to wrap to a new line as necessary, but still preserve all whitespace present in the source. See http://www.w3schools.com/cssref/pr_text_white-space.asp for more information about this CSS property.
Alternatively, if you do not want any line breaks added (either manually or through automatic word wrap), you can use one of the following CSS properties for your <pre> tag:
overflow-x:hidden;This will simply cut off the text that extends past the right edge. It will not be visible at all.overflow-x:scroll;This will cause scroll bars to appear within your webpage when text extends past the right edge. This will prevent the entire page from getting so wide that scroll bars appear at the bottom. See http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll for an example.
You could use some CSS properties:
pre {
display: flex;
white-space: normal;
word-break: break-word;
}
Opcionalmente, si <pre> está dentro de <span> :
span pre { display: inline-flex; }