CSS-переполнение текста в зависимости от пространства, оставленного помимо элементов родства.

Question

Я пытаюсь создать элемент списка, содержащий текст слева и элементы действия справа. Если текст длится дольше, доступный текст пространства заменяется многоточием.

- This is a list entry with text that is… [>] 

Если вы наведете элемент списка, больше элементов действий будет показано, как:

- This is a list entry with text tha… [x] [>] 

Я бы предпочел CSS единственное решение, не зависящее от JS.

Это то, что я придумал с http://jsfiddle.net/rBthS/265/ , но почему-то у меня такое ощущение, что я чего-то не хватает.

Должен быть более прямой путь. Вы можете помочь?

Answer 1

Вам нужно добавить xml для FF. Это код CSS:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-binding: url('path_to_xml/ellipsis.xml#ellipsis'); 

XML:

<?xml version="1.0"?> 
<bindings 
     xmlns="http://www.mozilla.org/xbl" 
     xmlns:xbl="http://www.mozilla.org/xbl" 
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
     > 
    <binding id="ellipsis"> 
     <content> 
      <xul:window> 
       <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> 
      </xul:window> 
     </content> 
    </binding> 
</bindings> 

Я проверил на FF, Chrome, Opera, Safari и IE, и это работает.

Об этом есть сообщение here.

Answer 2

Подумав об этом немного больше чем проще решение, которое я искал это http://jsfiddle.net/rBthS/272/

<ul> 
    <li> 
    <div style="float: right;">Foo Bar</div> 
    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"> 
     More text then this can handle … 
    </div> 
    </li> 
    <li>…</li> 
</ul>