web-dev-qa-db-fra.com

Le texte en débordement peut-il être centré?

Lorsque je spécifie text-align:center pour un élément dont la largeur est supérieure à la largeur du texte, le texte est centré dans la zone de contenu de l'élément (comme prévu).

Lorsque je spécifie text-align:center pour un élément dont la largeur est inférieure à la largeur du texte, celui-ci est aligné sur le bord gauche de la zone de contenu et déborde de ce dernier.

Vous pouvez voir les deux cas en action ici .

Toute magie CSS peut-elle faire en sorte que le texte déborde de manière égale à la fois des bords gauche et droit de la zone de contenu, de sorte qu'il reste centré?

csstextoverflowcenteralignment
47
Nathan Ryan

Je sais que cette question est ancienne, mais le problème me posait le même problème et j'ai trouvé une solution beaucoup plus simple en un tour de main . http://jsfiddle.net/7hy3w2jj/

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

Alors vous avez juste besoin de cette définition

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

Si vous pouvez utiliser des pseudo-éléments, vous pouvez le faire sans aucun code HTML . Ajoutez simplement ces définitions à votre conteneur de texte. http://jsfiddle.net/7287L9a8/

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

Le seul inconvénient de la pseudo-variante est qu'elle ne fonctionne qu'avec une seule ligne de texte.

80
Nemo64

Div magique à la rescousse. Si quelqu'un est intéressé, vous pouvez voir la solution ici .

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;
}
15
Nathan Ryan

Cela ressemble à une vieille question.

Maintenant, je pense qu’il ya une bonne réponse avec flex.

Vous pouvez faire ceci simplement comme ceci:

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

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

C'est tout.

J'espère que beaucoup d'aide pour vous!

5
Alex

Donnez à la plus variable div un margin: 0 -50%. Si les éléments sont tous des blocs d'affichage ou des blocs en ligne et que l'alignement du texte est centré, cela laisse plus d'espace pour le texte de l'élément le plus à l'intérieur. Au moins, ça marche pour moi.

0
atwixtor

Exigence étrange. J'élargirais les cases à la taille du texte.

Une solution possible pourrait impliquer un retrait de texte négatif: text-indent: -50px;, mais cela ne fonctionnera pas pour les textes plus petits (première DIV dans votre exemple). Pas de meilleure idée ici pour le moment.

0
feeela

Essayer 

Word-wrap:break-Word;

au lieu de:

white-space:nowrap;

ou le voulez-vous sur une seule ligne?

0
FraserK

celui-ci semble fonctionner: ajoutez un bloc wrapper avec position relative et left: 50% margin-left: -100% vous pouvez le voir ici Voici le code:

<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>
0
malko

Pour que la solution fonctionne avec un texte multiligne, vous pouvez modifier la solution de Nathan en modifiant la valeur de gauche de 50% à 25%.

0
Edmond Chui