O uso do rótulo <Pre> em HTML é uma maneira fácil-à-vista conteúdo formatado. Normalmente é usada quando você quer mostrar alguma parte do código-fonte ou qualquer outro tipo de texto, cuja aparência Indo para diferem do normal usado no web site.
Para usar esta tag, Se isto não tem qualquer estilo, o normal é que quando é exibida em dispositivos com o menor tamanho de tela, o texto dentro dela fora do recipiente.
Como exemplo de, em seguida, vemos dois textos, um dentro de uma marca <p> ,com borda vermelha, e outro em uma etiqueta <Pre> com borda verde.
Como você pode ver, Dependendo da tela o dispositivo a partir de onde você está vendo este artigo, Se o texto dentro do tag <Pre> não entrar por completo no recipiente, Isto Sai do mesmo.
Para Fix Este problema, o que você precisa fazer é modificar o estilo marca <Pre> adição de a seguir atributos para seu CSS:
1 2 3 4 5 6 7 8 | pre { border: 1px solid green; white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } |
obtenção de uma resultado Em seguida, mostramos como:
Você pode vê-lo na Guia código CSS.
Desta forma, Você pode fazer com que o conteúdo hospedado em seu Etiquetas <Pre> não ser fora do recipiente, o que é adaptar-se ao mesmo, Dependendo do tamanho da tela.
