1

この問題に関連するスタックオーバーフローに関するいくつかの質問を見つけましたが、私のものは少し独特で、解決策を見つけることができませんでした。私もCSSの専門家ではありません。

私の状況は次のとおりです。次の制約で表示する必要がある div 内に文字列があります。

例として次の文字列を使用します。

  1. テキストの中央は、div の中央に揃える必要があります。
  2. div は 100% 幅にすることができますが、1 行に制限する必要があります。ウィンドウが小さすぎる場合、テキストの切り捨てはどちらかの側で発生する必要がありますが、テキストの中央は常に表示されている必要があります。たとえば、ウィンドウが小さすぎる場合、div の内容は次のようになります。

これを達成するのに役立つCSSは何ですか? 私は無駄に次のことを試しました：

<html>
<head>
<style type='text/css' >
    div {
        width:100%;
        border:solid 1px black;
        text-align: center;
        vertical-align:middle;
        display: table-cell;
        white-space:nowrap;
        overflow:hidden;
    }
</style>
</head>
<body>
<div>
The quick brown fox jumps over the lazy dogs, again and again as well too.
</div>
</body>
</html>

ここでの動機は、いくつかの検索結果をリストに表示するモバイル Web アプリを作成しようとしていることです。検索テキストは常に強調表示され、リストに常に表示されるようにしたいと考えています。したがって、検索クエリが「怠惰な犬」だった場合、検索結果全体を 1 行に収めることができないため、幅 100% の div に収まるようにして、中央に「怠惰な犬」を表示し、余分な文字を追加する必要があります。テキストは両側で切り捨てられます。

そのため、ユーザーはリスト内の結果の 1 つとしてこのようなものを見るかもしれません。(「...」は必須ではありません。明確にするためにここに示します):

...怠惰な犬、また...

さらに、ユーザーが横向きと縦向きの間でデバイスの向きを切り替えると、リスト項目が適切に拡張され、より多くのテキストが表示されるはずです。

私が今考えている厄介なjavascriptルートの代わりに、これを行うためのエレガントなcssの方法があると確信しています。

明確化できるかどうか、または私がやろうとしていることを達成する別の方法があるかどうか教えてください。それとも、そもそもこれは適切な UI デザインの選択ではないのでしょうか?

いつものように、どんな助けも大歓迎です!

ありがとう！

ムハンマド

4

2 に答える 2

0

何を言っているのかよくわかりませんが、うまくいくか#id-of-div { width: auto; } body { text-align: center; overflow-x: hidden; }どうか はわかりませんが、とにかく試してみてください。

于 2013-05-11T16:06:42.747 に答える