1

短縮版

テキストが十分に短い場合は中央に配置され、長すぎて収まらない場合は左揃えになり、テキストの最後が配置されるように、テキストを要素 (固定幅) 内に配置したい（経由で）切断されoverflow: noneます。この場合、( 経由でtitle="") 全文を含むツールチップが表示されます。どうすればいいですか？

完全版

私が言及している要素は、写真の下にあるタイトルです。たくさんの写真が横に並んでいるので、タイトルを重ねたりしたくありません (固定幅と高さで写真の下に絶対に配置されます)。タイトルの場合は中央にあると見栄えが良くなりますが、中央にあるoverflow:noneために両端が切り取られた長い文字列は見栄えが悪くなります. 現在、私はこれを持っています：

<div class="ImageTitle">
    <table style="margin: auto">
        <tr><td title="The title">The title</td></tr>
    </table>
</div>

これは控えめに言ってもハックですが、単純なDIVs とSPANs では機能しないようです。何か案は？

4

3 に答える 3

2

これはあなたが望むことをするべきだと思います：

div.ImageTitle {
    width: 100px; /* or whatever */
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

JS フィドルのデモ。

(不必要な) の削除を想定していることに注意してくださいtable。テーブルがまだ存在する場合、その css は の css をオーバーライドしますdiv.imageTitle。

これは条件付きでorを割り当てませんが、前者の ( ) は要素の中心から要素の左マージンに自然に移動し (以外に設定されていない限り)、右側にオーバーフローします。1 行だけにするために、折り返しを削除していました。text-align: centertext-align: lefttext-align: center;text-directionltrwhite-space: nowrap

ツールチップについては、if/elseステートメントで機能するようにhtmlを使用する方法がないため、（または使用する他の要素に）ハードコードする必要があると思います。divJavaScript を使用したい場合は可能ですが、html/cssだけではできません。

于 2011-01-23T21:05:10.483 に答える
1

これは役に立ちますか？（ごめんなさい、ここで遅くなりました、私は疲れていて集中力がありません）

<!doctype html>
<html>
<head>
<style type="text/css">
.outer {
  max-width: 100%;
  overflow: hidden; 
}
.inner {
  display:inline-block;
  max-width:inherit;
  white-space: nowrap;
  text-align:left;
}
</style>
</head>
<body>
<div style="width:8em;text-align: center; border: 1px solid black">
<div class="outer">
  <span class="inner">
      Short cap
  </span>
</div>
<p />
<div class="outer">
  <span class="inner">
      A very long caption
  </span>
</div>

</div>

ただし、高さを修正する適切な方法が必要です。

于 2011-01-23T21:11:20.560 に答える
0

これを行う唯一の方法は JavaScript を使用することだと思います。

于 2011-01-23T21:04:00.950 に答える