css - salto - justificar texto html

¿Se puede desbordar el texto centrado?

Question

Cuando especifico text-align:center para un elemento con un ancho que es mayor que el ancho del texto, el texto se centra dentro del cuadro de contenido del elemento (como se esperaba).

Cuando especifico text-align:center para un elemento con un ancho que es menor que el ancho del texto, el texto se alinea con el borde izquierdo del cuadro de contenido y se desborda del borde derecho del cuadro de contenido.

Puedes ver los dos casos en acción here .

¿Puede alguna magia CSS hacer que el texto se desborde igualmente tanto en el borde izquierdo como en el derecho del cuadro de contenido, para que permanezca centrado?

Answer 1

Dale un margin: 0 -50% div más interno margin: 0 -50% . Si los elementos son todos bloques de visualización o bloque en línea y la alineación de texto está centrada, esto proporciona más espacio para el hombro para el texto del elemento más interno. Al menos, funciona para mí.

Answer 2

Div magia para el rescate En caso de que alguien esté interesado, puede ver la solución here .

HTML:

<div id="outer">
    <div id="inner">
        <div id="text">some text</div>
    </div>
</div>
<div id="outer">
    <div id="inner">
        <div id="text">some text that will overflow</div>
    </div>
</div>

CSS:

#outer {
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
}
#inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
}
#text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
}

Answer 3

Esto parece una vieja pregunta.

Ahora creo que hay una buena respuesta con flex.

Puedes hacer esto simplemente así:

<div id="small_div">overflowing text</div>

#small_div {
    display: flex;
    justify-content: center;
}

Eso es.

Espero mucha ayuda para ti!

Answer 4

Extraño requerimiento Expandiría los cuadros al tamaño de los textos.

Una posible solución podría incluir un texto de sangría negativo: text-indent: -50px; , pero eso no funcionará para textos más pequeños (primer DIV en su ejemplo). No hay una mejor idea aquí ahora.

Answer 5

Para que la solución funcione para el texto de varias líneas, puede modificar la solución de Nathan cambiando el #inner izquierda del 50% al 25%.

Answer 6

Sé que esta pregunta es antigua, pero acabo de tener el mismo problema y encontré una solución mucho más fácil con solo un lapso. http://jsfiddle.net/7hy3w2jj/

<div>some text</div>
<div>
    <span class="text-overflow-center">some text that will overflow</span>
</div>

Entonces solo necesitas esta definición

.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}

Si puede trabajar con pseudoelementos, puede hacerlo sin ningún html. Simplemente agregue estas definiciones a su contenedor de texto. http://jsfiddle.net/7287L9a8/

div:before {
    content: "";
    margin-left: -100%;
}
div:after {
    content: "";
    margin-right: -100%;
}

El único inconveniente de la pseudovariante es que solo funciona con una línea de texto.

Answer 7

Tratar

word-wrap:break-word;

en lugar de:

white-space:nowrap;

¿o solo lo quieres en una línea?

Answer 8

este parece funcionar: agregue un bloque contenedor con posición relativa e izquierda: 50% margen izquierdo: -100% puede verlo here Aquí está el código:

<style>
div {
    display: block;
    position: relative;
    left: 100px;
    height:1.5em;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid black;
    background-color: silver;
}
span{
    display:block;
    position:relative;
    left:50%;
    margin-left:-100%;
}
</style>
<div><span>some text</span></div>
<div><span>some text that will overflow</span></div>