我有一個長文本不適合它佔據的div。 div類如下:CSS - 將div內的長連續文本向右移動?
.mydiv {
overflow:hidden;
padding:3px 3px 3px 5px;
white-space:nowrap;
}
當然,我只能看到部分文本。問題是它顯示前N個字符,我想顯示最後N個字符。我如何用CSS實現它? Text-align
在這裏沒有幫助。
我有一個長文本不適合它佔據的div。 div類如下:CSS - 將div內的長連續文本向右移動?
.mydiv {
overflow:hidden;
padding:3px 3px 3px 5px;
white-space:nowrap;
}
當然,我只能看到部分文本。問題是它顯示前N個字符,我想顯示最後N個字符。我如何用CSS實現它? Text-align
在這裏沒有幫助。
如果您可以將文字包裝到其他元素中,可以按照this fiddle中的說明使其工作。我向右移動了一個嵌套的<span>
。
你將不得不使用JavaScript來滾動DIV一路向右,試着:
var obj = document.getElementById("div-id");
obj.scrollLeft = obj.scrollWidth - obj.clientWidth
<div class="wrap">
<div class="window">Lots of text</div>
</div>
.wrap { overflow: hidden; position: relative; }
.window { position: absolute; right: 0px; }
就像一個註釋:float:就像在Pat的例子中一樣,爲我的特定情況工作得更好 – Bostone 2010-07-23 22:52:44
你可以只用CSS做:
<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)
賓果!這對我來說非常合適,謝謝Pat – Bostone 2010-07-23 22:51:10