texto tamaño sobrepasa salen evitar elementos div desbordamiento boton bootstrap ajustar ajustable css

css - tamaño - ¿Puedo ajustar el ancho de un área<pre> para que se ajuste al texto?



texto ajustable css (5)

Agregando display: inline-block debería hacerlo para FF, Safari y Chrome. Pero asegúrese de verificar en todos los navegadores y cómo se comporta, especialmente IE

Tengo los siguientes

area to fit the text?">

  6. Log In Sign Up

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.

18

I have the following:

<p>This is a test</p> <pre>public class Car { protected Car() { } protected Car(int speed) { } protected void Car() { } }</pre> <p>Another line</p>

y

pre { font-family: monaco,consolas,"courier new",monospace; font-size: 1em; min-height: 3em; overflow: auto; padding: 1em; xwidth: 80%; background-color: red; }

Cuando el texto muestra el fondo <pre> va todo el ancho de la página. Tengo una demo aquí:

fiddle

Lo que me gustaría es que el fondo rojo se detenga justo después del carácter más correcto de mi código. No quiero ver un área roja grande que se extienda de un lado de la página a otro.

Alguien puede decirme si es posible hacer esto con CSS. Realmente no estoy seguro ya que no puedo pensar lo que puedo hacer.

Gracias

css
share | mejorar esta pregunta
preguntó 20 de agosto de 2011 a las 14:28
gordon
274 4 9
  • 1
    ¿Podrías decirnos qué es xwidth ? - Michas agosto 20 ''11 a las 14:30.
  • 2
    Antes era ancho y luego descubrí que no funcionaba, así que simplemente puse la x allí para que el parámetro no hiciera nada. - Aug 20 ''11 a las 14:51

5 respuestas 5

dieciséis

Puedes usar display: inline-block; :

http://jsfiddle.net/hLVV9/1/

Aunque, por favor, consulte el soporte del navegador, ya que no me sorprendería si IE no lo admite.

share | mejorar esta respuesta
respondió el 20 de agosto de 2011 a las 14:32
PeeHaa
50.3k 43 166 243
  • +1 para inline-block en inline-block , si solo fuera compatible en todas partes. - deceze♦ 20 de agosto de deceze♦ a las 14:34
3

La mejor solución hasta el momento:

pre { white-space: pre-wrap; }

share | mejorar esta respuesta
Respondió el 5 de abril de 18 a las 19:43.
Guillaume Le Mière Guillaume Le Mière
2,176 3 21 44
0

Puedes usar float:left y un div limpieza para lograr esto.

http://jsfiddle.net/hLVV9/2/

share | mejorar esta respuesta
respondió el 20 de agosto de 2011 a las 14:32
Evan Mulawski
46.1k 10 100 136
0

Para ese comportamiento necesitará float su <pre> . Por supuesto, los bloques flotantes causan algunos cambios de diseño, por lo que necesita envolverlo en otro elemento de bloque de compensación:

<div class="pre-wrapper"><pre>Lorem ipsum</pre></div> .pre-wrapper { overflow: hidden; } .pre-wrapper pre { float: left; }

share | mejorar esta respuesta
respondió el 20 de agosto de 2011 a las 14:33
deceze♦ ♦ deceze
397k 62 540 697
  • Tu respuesta se ve bien. Pero hay un pequeño problema. No tengo acceso para entrar y cambiar nada en el HTML. Esto viene de un almacén de datos. ¿Hay alguna manera de que pueda hacer esto sin un envoltorio? Por ejemplo, de alguna manera podría hacer un "claro" después del pre en CSS? - Aug 20 ''11 a las 14:48
  • Apenas. En ese caso, un inline-block es la mejor opción, que AFAIK solo IE7 no puede manejar. - deceze♦ 20 de agosto de deceze♦ a las 15:00
0

Agregando display: inline-block debería hacerlo para FF, Safari y Chrome. Pero asegúrese de verificar en todos los navegadores y cómo se comporta, especialmente IE

share | mejorar esta respuesta
respondió el 20 de agosto de 2011 a las 14:34
2,238 1 12 13

Tu respuesta

Borrador guardado
proyecto descartado

Regístrate o inicia sesión

Regístrate usando Google
Registrarse usando Facebook

Regístrese usando correo electrónico y contraseña

Publicar como invitado

Requerido, pero nunca mostrado

Al hacer clic en "Publicar su respuesta", usted reconoce que ha leído nuestros términos de servicio , política de privacidad y política de cookies actualizados, y que su uso continuado del sitio web está sujeto a estas políticas.

No es la respuesta que estás buscando? Busque otras preguntas etiquetadas css o haga su propia pregunta .

preguntó

visto

8,462 veces

activo

hace 11 meses

Próximos Eventos
Elección del moderador comunitario 2019
termina el 19 de marzo

Preguntas calientes de la red

preguntas más calientes
feed de preguntas
defecto
 

La mejor solución hasta el momento:

pre { white-space: pre-wrap; }

Para ese comportamiento necesitará float su <pre> . Por supuesto, los bloques flotantes causan algunos cambios de diseño, por lo que necesita envolverlo en otro elemento de bloque de compensación:

<div class="pre-wrapper"><pre>Lorem ipsum</pre></div> .pre-wrapper { overflow: hidden; } .pre-wrapper pre { float: left; }

Puedes usar display: inline-block; :

http://jsfiddle.net/hLVV9/1/

Aunque, por favor, consulte el soporte del navegador, ya que no me sorprendería si IE no lo admite.