¿Cómo hacer que un DIV no se envuelva?

179

Necesito crear un estilo de contenedor DIV que contenga varios otros DIV. Se solicita que estos DIV no se ajusten si la ventana del navegador cambia de tamaño para ser estrecha.

Traté de hacerlo funcionar como a continuación.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

Esto funciona en la mayoría de los casos. Sin embargo, en algunos casos especiales, la representación es incorrecta. Encontré que el contenedor DIV cambia a 3000px de ancho en RTL de IE7; y resulta ser desordenado

¿Hay alguna otra forma de hacer que un contenedor DIV no se envuelva?

Morgan Cheng
fuente
agregué esta etiqueta: white-space: nowrap; y esta etiqueta: text-overflow: ellipsis; a mi código
saber tabatabaee yazdi

Respuestas:

245

Intente usar white-space: nowrap;en el estilo contenedor (en lugar de overflow: hidden;)

notkwite
fuente
48

Si no quiero definir un ancho mínimo porque no sé la cantidad de elementos, lo único que me funcionó fue:

display: inline-block;
white-space: nowrap;

Pero solo en Chrome y Safari: /

fguillen
fuente
33

Lo siguiente funcionó para mí sin flotar (modifiqué un poco su ejemplo para obtener un efecto visual):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}
<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Los divs pueden estar separados por espacios. Si no quieres esto, úsalo en margin-right: -4px;lugar de margin: 5px;for .slide(es feo pero es un problema difícil de manejar ).

JSideris
fuente
Gran respuesta. Agregué un ejemplo similar a continuación, pero lo eliminé después de ver el suyo. Si no tiene que soportar IE9, también puede usar flexbox: jsfiddle.net/7gsrb38L/1
ValentinVoilean
Puede usar comentarios HTML entre los divs </div><!-- --><div class="slide">si desea eliminar los espacios adicionales entre ellos. El estilo de bloque en línea hace que el espacio en blanco en su código se recoja como espacio en el documento HTML.
Jo.
@Jo. para reducir el tamaño de la página, podría usar algo que no se representa, por ejemplo, cuando se usa php: </div><?php ?><div class="slide">renders como </div><div class="slide">en el código fuente.
Fleuv
Además, si genera el HTML con JavaScript, puede evitar espacios. Yo uso DOThtml . El HTML anterior se puede reemplazar con esto:dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")
JSideris
30

El combo que necesitas es

white-space: nowrap

en el padre y

display: inline-block; // or inline

en los niños

Funkodebat
fuente
25

Esto funcionó para mí:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}
<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Turako
fuente
Esto con desbordamiento: oculto funcionó de maravilla para mí. Gracias.
Alfie
10

overflow: hiddendebería darte el comportamiento correcto. Supongo que RTLestá en mal estado porque tienes float: leften el divs encapsulado .

Además de ese error, tienes el comportamiento correcto.

Yuval Adam
fuente
1
Comprobaré si se debe a "float: left" en divs encapsulados. Pero, el mismo código funciona bien en Firefox y Safari, pero no en IE. Entonces, realmente dudo que este sea el caso.
Morgan Cheng
2

Intenta utilizarlo width: 3000px;para el caso de IE.

Andres GR
fuente
2

Nada de lo anterior funcionó para mí.

En mi caso, necesitaba agregar lo siguiente al control de usuario que había creado:

display:inline-block;
J-DawG
fuente
1

puedes usar

display: table;

para su contenedor y por lo tanto evite el overflow: hidden;. Debería hacer el trabajo si lo usó solo con fines de deformación.

Paka
fuente
0
<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>
Anil Khatour
fuente
0

Uso display:flexywhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}
<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

kishore
fuente
-1

La <span>etiqueta se usa para agrupar elementos en línea en un documento.
(fuente)

Miguel
fuente
Si bien esto es cierto, no parece abordar la pregunta en absoluto.
Quentin
Esto responde perfectamente a la pregunta porque span y div son idénticos en todo, excepto que div está envuelto y span no. Y puede implementar cualquier solución alternativa que desee.
Mike
2
¿Eso significa que su sugerencia es "Usar tramos en lugar de divs"? Porque eso no es lo que dijiste.
Quentin