0

だから私はこのようなものが欲しい：

Hello [element]

だけでなく、この場合：

Hello blahblahblah... [element]

要素を右にフローティングすると、これが行われますが、これは望ましくありません。

Hello                 [element]
Hello blahblahblah... [element]

編集：

私が試したhtmlはこれでした：

<h3 id="container">
  <span>[element]</span>
  <a>dynamic text</a>
</h3>

CSS:

span{
  float: right;
}

#container {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

別の問題は、[要素] が可変長になる可能性があることです。[要素] に収まるように a タグを切り捨てて、1 行にまとめたいと思います。私はそれが質問をより難しくしたかもしれないことを知っています...

編集2：

コンテナ h3 の最大幅を固定したいことが明確ではないことに気付きました。したがって、基本的に、タグとスパンを合わせた幅がその最大幅より大きい場合、スパンは切り捨て位置を左に配置します。そのようです：

文字列は: Hello World

したがって、その場合は次のようになります。

Hello World...[小エル]

地獄...[より大きなスパン エル]

アイデア？

4

1 に答える 1

3

更新されたアイデア

これは、以下の私の元のアイデアの洗練されたバージョンですが、追加のラッピングを使用して、チャットで言及したコンテナの固定幅と一般的な外観を作成しようとしますdiv。これが純粋にcssで機能することを確認する唯一の方法は、「バッジ」領域の最大幅を事前に知ってからmax-width、テキスト領域の幅をコンテナの幅からその可能性を差し引いたものに設定することです。バッジ領域の最大幅。これが以下の改訂されたコードとフィドルの例200pxです。ここでは、最大でコンテナを想定しています。100pxバッジ領域の幅。一部のテキストが「時期尚早に」切り取られることになります（たとえば、幅が広くなる可能性があるように見えますが、特定のスペースに制限しています。フィドルの3行目を参照してください）。

HTML

<h3 class="container">
  <div>   
  <span>[elem]</span>
  <a>dynamic text</a>
  </div>
</h3>

CSS

.container {
  width: 200px; /* this defines your right edge */
  background-color: cyan;
  overflow: hidden;
}

.container > div {
  float: left;
  clear: left;
  position: relative;
  padding-right: .1em;
  white-space: nowrap;
}

.container span {
  position: absolute;
  left: 100%;
  white-space: nowrap;
}

.container a {
  display: block; 
    /* the following assumes the span "badge" area is 100px max, 
       so it is 200px - 100px = 100px in width */ 
  max-width: 100px;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
}

オリジナルのアイデア

おそらくこれはうまくいくでしょう。

.container {
  float: left; /* this collapses the container around the 'a' tag */
  position: relative; /* this is going to position the 'span' */
  padding-right: .1em; /* gap to element 'span' */
  white-space: nowrap; 
}

.container span {
  position: absolute;
  left: 100%; /* push behind 'a' tag */
  white-space: nowrap; /* keep this from wrapping */
}

.container a {
  display: block;
  max-width: 100px; /* set your max width for the 'a' tag only */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
}

フィドルの例を参照してください。

于 2012-11-15T02:38:53.810 に答える