10

CSSを使用すると、を使用してコンテナ内のテキストを水平方向に中央揃えにするのは簡単ですtext-align:center;が、そのテキストの1つの単語がコンテナの幅よりも大きい場合、ブラウザは自動的にコンテナの左側の境界に「クリップ」します（サイズの大きい単語は小さすぎるコンテナの左側に揃えられ、CSSword-break:hyphenate;プロパティ設定（または同様の設定）がないと、サイズの大きい単語がコンテナの右端を超えて突き出ます。

ここに画像の説明を入力してください垂直方向のスペースを節約するために、この写真をテキストの左側にフロートさせる方法はありますか？しかたがない。ともかく...

子コンテナ要素を使用してテキストを保持せずに、特大の単語を中央に配置して、コンテナの左側と右側の両方に均等にぶら下がるようにする方法はありますか？

繰り返しますが、コンテナ内でテキストコンテナを使用したくありません。<div>text to be centered</div>固定widthおよび負の子を使用するmargin-leftかabsolute、コンテナ要素をの中に配置することで、5秒でこれを行うことができますが、単語が長すぎて幅に収まらない場合でもテキストを中央に配置するCSS属性relative divを探しています。デフォルトでは、これは行いません。text-align:center

考え？ありがとう！-スリンク

4

3 に答える 3

12

このフィドルdivは、「問題」と次の「解決策」の両方を示す3つの要素を示しています。

1つの可能な「解決策」

あなたのニーズはわかりませんが、これまでのところ、私が見つけた唯一の本当の解決策はdisplay: table、テキストコンテナに設定することです。ただし、これにより、コンテナを必要な幅に伸ばして最長の単語を含めることができます。これは、望ましくない場合があります。それでよければ、それが最善の解決策です。

別の可能な「偽の」解決策

少なくとも要素の見かけのサイズを維持する必要がある場合は、創造的な疑似要素を使用して外観を偽造することができます。

.fakeIt {
    text-align: center; /* what you wanted all along */
    display: table; /* key to get centered */
    position: relative; /* allow reference for absolute element */
    z-index: 2; /* set up for a background to be pushed below */
    width: 40px; /* what you want, but table resizes larger if needed*/
    border: none; /* transferring border to the "fake" */
    background-color: transparent; /* transferring background to the "fake" */
}

.fakeIt:after {
    content: ''; /* before or after need it, even if empty */
    width: 40px; /* the original width you wanted for the container */
    position: absolute; /* need this to position it */
    z-index: -1; /* push it behind the foreground */
    left: 50%; /* push it to center */
    top:0; /* give it height */
    bottom: 0;  /* give it height */
    margin-left: -20px; /* half the width to finish centering */
    border: 1px solid red; /* the border you wanted on the container */
    background-color: yellow; /* the background you wanted on the container */
}

ただし、特定のアプリケーションによっては、「偽の」ソリューションが機能しない場合があります。また、元の要素は引き続きドキュメント内のより広い「スペース」を占有し、実際のようには見えません。それは問題を引き起こす可能性があります。コンテナが負marginの場合はそれを解決できますが、テキストの幅によって値が異なるため、値を何に設定する必要があるかわかりません。

コメントで、cssの疑似要素に精通していないと述べているので、簡単な紹介が必要になる場合があります。

于 2012-07-14T03:23:34.413 に答える
3

そのくそった水平スクロールバー！

http://jsfiddle.net/sqKU6/

<div class="inner">
    aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa 
</div>
​

CSS：

.inner {
    text-align: center;
    position: relative;
    left: +450%;
}
.inner:before {
    content: '';
    display: inline-block;
    margin-right: -900%;
}
​
于 2012-07-11T18:04:44.817 に答える
0

私はこのソリューションを使用します：

.limited-string {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}
于 2017-12-07T12:22:17.230 に答える