bootstrap - innerhtml jquery ejemplos

HTML+CSS: ¿Cómo forzar que los contenidos div permanezcan en una línea?

Question

Tengo un texto largo dentro de un div con width definido :

HTML:

<div>Stack Overflow is the BEST !!!</div>

CSS:

div {
border: 1px solid black;
width: 70px;
}

¿Cómo podría obligar a la cadena a permanecer en una línea (es decir, a cortar en medio de "Desbordamiento")?

Intenté usar el overflow: hidden , pero no sirvió de nada.

Answer 1

Intente establecer una altura para que el bloque no pueda crecer para adaptarse a su texto, y mantenga el overflow: hidden parámetro overflow: hidden

EDITAR: Este es un ejemplo de lo que le podría gustar si necesita mostrar 2 líneas de altura:

div {
border: 1px solid black;
width: 70px;
height: 2.2em;
overflow: hidden;
}

Answer 2

Prueba esto. Utiliza pre lugar de nowrap como supongo que querría que esto se ejecute de forma similar a <pre> pero cualquiera funcionará bien:

div {
border: 1px solid black;
max-width: 70px;
white-space:pre;
}

http://jsfiddle.net/NXchy/11/

Answer 3

Prueba esto:

div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}

Answer 4

Salté aquí buscando lo mismo, pero ninguno funcionó para mí.

Hay instancias en las que, independientemente de lo que haga, y dependiendo del sistema (Oracle Designer: Oracle 11g - PL / SQL), los divs siempre irán a la siguiente línea, en cuyo caso debe usar la etiqueta span.

Esto funcionó de maravilla para mí.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
<input type="radio" id="radio4" name="p_verify_type" value="SomeValue" />
</span>
Just Your Text ||
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

Answer 5

Todos saltaron sobre este !!! Yo también hice un violín

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar obtiene un punto por señalar white-space:nowrap en white-space:nowrap primero white-space:nowrap .

Aquí hay un par de cosas que necesitas overflow: hidden si no quieres ver los caracteres adicionales sobresaliendo en tu diseño.

También, como se mencionó, puede usar white-space: pre (ver EnderMB) teniendo en cuenta que pre no colapsará los espacios en white-space: nowrap mientras que espacios en white-space: nowrap ajustará.

Answer 6

Tu código HTML: <div> is the BEST !!!</div>

CSS:

div {
width: 100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

Ahora el resultado debe ser:

Stack Overf...

Answer 7

Usar white-space:nowrap y overflow:hidden

http://jsfiddle.net/NXchy/8/

Answer 8

agrega esto a tu div

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

Answer 9

en tu css usa white-space:nowrap;

Answer 10

div {
display: flex;
flex-direction: row;
}

Fue la solución que funcionó para mí. En algunos casos con div -lists esto es necesario.

algunos valores de dirección alternativos son row-reverse, column, column-reverse, unset, initial, inherit que hacen lo que usted espera que hagan