web-dev-qa-db-ja.com

オーバーフローテキストを中央に配置できますか？

テキストの幅より大きい幅の要素にtext-align:centerを指定すると、テキストは要素のコンテンツボックスの中央に配置されます（期待どおり）。

テキストの幅より小さい幅の要素にtext-align:centerを指定すると、テキストはコンテンツボックスの左端に揃えられ、コンテンツボックスの右端からはみ出します。

実際の2つのケース here を確認できます。

CSSの魔法によって、テキストがコンテンツボックスの左端と右端の両方から均等にオーバーフローし、中央に配置されるようにすることはできますか？

csstextoverflowcenteralignment
57
Nathan Ryan

私はこの質問が古いことを知っていますが、同じ問題を抱えていて、スパンだけではるかに簡単な解決策を見つけました。 http://jsfiddle.net/7hy3w2jj/

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

次に、この定義が必要です

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

疑似要素を使用できる場合は、HTMLをまったく使用せずに実行できます。これらの定義をテキストコンテナーに追加するだけです。 http://jsfiddle.net/7287L9a8/

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

疑似バリアントの唯一の欠点は、1行のテキストでしか機能しないことです。

90
Nemo64

魔法を助けて救いに。誰かが興味を持っている場合は、ソリューション 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;
}
14
Nathan Ryan

これは古い質問のようです。

今、私はフレックスでいくつかの良い答えがあると思います。

これは次のように簡単に実行できます。

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

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

それでおしまい。

どうぞよろしくお願いいたします。

10
LarAng

最も内側のdivを与えるmargin: 0 -50%。要素がすべて表示ブロックまたはインラインブロックであり、テキストの配置が中央にある場合、これは最も内側の要素のテキストにより多くの肩のスペースを提供します。少なくとも、それは私には有効です。

0
atwixtor

奇妙な要件。ボックスをテキストサイズに拡大します。

解決策の1つとして、負のテキストインデントが含まれる可能性があります：text-indent: -50px;。ただし、小さいテキスト（例では最初のDIV）では機能しません。今のところ、これ以上のアイデアはありません。

0
feeela

試す

Word-wrap:break-Word;

の代わりに：

white-space:nowrap;

それとも1行だけにしますか？

0
FraserK

これは機能しているようです：相対位置と左：50％マージン-左：-100％のラッパーブロックを追加します here これがコードです：

<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

ソリューションを複数行テキストで機能させるには、左の#innerを50％から25％に変更して、Nathanのソリューションを変更します。

0
Edmond Chui