如何剪輯文本並使用CSS2對齊（不是浮動）元素？

The awesome combination of white-space: nowrap;,overflow: hidden; and text-overflow: ellipsis; in CSS3在塊元素中剪裁文本方面做得非常出色。如何剪輯文本並使用CSS2對齊（不是浮動）元素？

我想用CSS2（與現代瀏覽器，IE7和更新版本兼容）來做到這一點，並將文本（不浮點）對齊到右側。可能嗎？

Here's a jsFiddle with an example code snippet。請測試你的答案。謝謝！

來源

2012-04-06 its_me

是什麼讓你覺得你不能只設置text-align:right？對我來說工作得很好。

white-space和text-overflow在所有現代瀏覽器（IE7 +）中均受支持。因此，在您的示例中，如果右對齊文本超出了父寬度，則它將被省略。

這是你的小提琴（只拉窗所以它的窄，你會看到它工作正常）：http://jsfiddle.net/rgthree/N3WYE/2/

來源

2012-04-06 15:44:01 rgthree

對於剪輯文本，我們需要爲塊元素定義一個寬度。這是文本左對齊的時候。一個例子是在這裏：http://jsfiddle.net/N3WYE/3/ – 2012-04-06 16:01:57

@ geekpanth3r好吧，所以你的問題*不是*如何文本溢出W /文本對齊的權利，但如何定位一個塊到對。您可以將位置放在右邊，但是此時您想要的位置......向右浮動，絕對位於右邊，將其放在容器中並將其右對齊。這是一個jsfiddle，在容器中有一個內聯塊。 http://jsfiddle.net/rgthree/N3WYE/4/ – rgthree 2012-04-06 16:15:42

@ geekpanth3r也許我應該更加明確。你的文本在你的例子中是* not * text-aligned。 *文本仍然右對齊*，但您的容器*左對齊* b/c您給它一個wdith，所以它不再跨越頁面。所以，你想把你的容器移到右邊，正如我所說，你可以通過漂浮滾動位置來實現，我在上面的評論中添加了這個位置。 – rgthree 2012-04-06 16:19:24

無法在IE中測試此項，但在父項目中顯示包含文本的元素inline-block，然後設置text-align: right。

http://jsfiddle.net/N3WYE/1/

編輯：display: inline上#breadcrumbs也應該工作，但是你會明顯地失去了block影響。

來源

2012-04-06 15:40:07 powerbuoy

真棒，和感謝的jsfiddle。 :) – 2012-04-06 16:03:14

但有一個問題。這不像將text-align設置爲正文那樣簡單，因爲它將頁面中的所有元素都對齊到右側，而且我的麪包屑沒有父元素（我無法編輯PHP，這就是問題所在）。有其他方法嗎？（再次，在jsFiddle如果可能的話，謝謝！） – 2012-04-06 16:07:35

是的，我知道。我在小提琴中使用'body'的原因是爲了避免添加更多的HTML。我認爲你有一個你可以使用的父元素。你可以很容易地將'p'與JS包裝在一個'div'中，或者只有一個CSS解決方案。 – powerbuoy 2012-04-06 16:34:39

如何剪輯文本並使用CSS2對齊（不是浮動）元素？

回答

相關問題