два динамически расположенных боковых контейнера с эллипсисом на левом контейнере

Question

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

--------------------------------------------- 
|[left element with lots of conte...][right]| 
--------------------------------------------- 

Ближайший я получил это: http://jsfiddle.net/xsr71pak/

Но обе ячейки таблицы используют 50% таблицы. Мне не нужно использовать таблицы, но это был самый близкий результат к тому, что я хотел. Может ли кто-нибудь помочь с этим?

Answer 1

Почти то же, что у вас есть, но вместо таблицы, просто использовать дивы. Правый плавающий первый пришел в HTML, чтобы поплавки выстроились правильно.

<div class="container"> 
    <div class="right">Something</div> 
    <div class="text-ellipsis">This is really long text, long test, long test, long test, long test, long test long text, long test, long test, long test, long test, long test long text, long test, long test, long test, long test, long test</div> 
</div> 

Fiddle: http://jsfiddle.net/xsr71pak/1/

Answer 2

Я надеюсь, что я understanded вам хорошо, и что это поможет вам:

<style> 
.container { 
      border: 1px solid black; 
      position: relative; 
     } 
     .info { 
      text-overflow: ellipsis; 
      overflow: hidden; 
      white-space: nowrap; 
     } 
     .dynamicWidth { 
      margin-right: 30px; 
     } 
     .staticWidth { 
      position: absolute; 
      top: 0; 
      right: 0; 
      width: 30px; 
      top: 25%; /*centers the content of this div in middle of height*/ 
     } 
#div1 {float:left;} 
</style> 
    <div class="container"> 
     <div class="dynamicWidth"> 
      <div id="div1">Title element</div> 
      <div id="div2" class="info">Text: This is a text which should be break with 3 dots when it is bigger then its parent div</div> 
     </div> 
     <div class="staticWidth">BUT</div> 
    </div> 

demo of code above

Answer 3

Что-то, как это должно решить проблему: http://jsfiddle.net/ug5k3k15/5/. Для этого требуется немного javascript, который я объясню ниже:

var widthContainer = document.getElementById('container').offsetWidth; 
/* gets the width of the container */ 

var widthText = document.getElementById('text').offsetWidth; 
/* gets the width of the text */ 

var widthRest = widthContainer - widthText; 
/* calculates the left-over space. This will result into a number like 500 */ 

document.getElementById("rest").style.width = widthRest + "px"; 
/* tell the computer what the width of #rest should be. You have to add " + "px" ", else this will just result into a number, and css doesn't understaind numbers.