2

占める div 内に収まらない長いテキストがあります。div クラスは次のとおりです。

.mydiv {
    overflow:hidden;
    padding:3px 3px 3px 5px;
    white-space:nowrap;
}

もちろん、テキストの一部しか見えません。問題は、最初の N 文字が表示され、最後の N 文字を表示したいことです。CSSでそれを達成するにはどうすればよいですか? Text-alignここでは役に立ちません。

4

4 に答える 4

1

テキストを別の要素でラップできる場合は、この fiddleに示すように機能させることができます。<span>ネストされたものを右に浮かせました。

于 2010-07-23T21:56:00.327 に答える
1 
<div class="wrap">
    <div class="window">Lots of text</div>
</div>

.wrap { overflow: hidden; position: relative; }
.window { position: absolute; right: 0px; }
于 2010-07-23T21:58:12.013 に答える
1

CSSだけでそれを行うことができます：

http://jsbin.com/ususu

  <div style="width: 150px; border: 1px solid red; overflow: hidden; position: relative; height: 2em;">
      <div style="position: absolute; right: 0px; padding: .5em;white-space:nowrap;">
  aaaaaaaaaaaabbbbbbbbbcccccccccccccccccddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggghhhhhhhhhhhhhhhhiiiiiiiiiiiii
     </div>
  </div>

(Firefox.YMMVでテスト済み)

于 2010-07-23T22:00:40.663 に答える
0

div を右端までスクロールするには、javascript を使用する必要があります。

var obj = document.getElementById("div-id");
obj.scrollLeft = obj.scrollWidth - obj.clientWidth
于 2010-07-23T21:56:08.617 に答える