Эллипсис по ширине жидкости

Question

У меня есть два div внутри обертки, и я хочу иметь первый div с максимальной шириной 65% и второй div с максимальной шириной 35%, сначала выравнивается влево, а второй выравнивается по правому краю, же ряд (белый-пространство: Nowrap), так что в основном то, что я пытаюсь получить это:

----------------------------------------------------------------------- 
|       |           | 
| THIS IS IS SHORT TEXT |    NOW THIS LINE COULD BE LONG | 
|       |           | 
----------------------------------------------------------------------- 

сейчас в худшем случае:

<----------------- 65% ----------------------> <------ 35% --------> 
----------------------------------------------------------------------- 
|            |      | 
| NOW THIS LINE IS LONG AND GROW MORE CAU... | NOW THIS LINE COU... | 
|            |      | 
----------------------------------------------------------------------- 

мне нужно, чтобы показать текст переполнения многоточие на оба текста. Есть идеи?

Answer 1

Я полагаю, вы могли бы просто использовать левый всплывающий DIV:

(Обратите внимание, что максимальная-ширина для демонстрационных целей только ... Вы можете позволить это течь до 100%, и это должно работать.)

.truncate { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.outer { 
 
    background-color: green; 
 
    text-align: right; 
 
} 
 

 
.inner1 { 
 
    max-width: 65%; 
 
    float: left; 
 
    background-color: red; 
 
    text-align: left; 
 
} 
 

 
.inner2 { 
 
    display: inline; 
 
}

<div class="truncate outer" style="max-width: 500px;"> 
 
    <div class="truncate inner1"> 
 
    THIS IS IS SHORT TEXT 
 
    </div> 
 
    <div class="inner2"> 
 
    NOW THIS LINE COULD BE LONG 
 
    </div> 
 
</div> 
 

 
&nbsp; 
 

 
<div class="truncate outer" style="max-width: 500px"> 
 
    <div class="truncate inner1"> 
 
    NOW THIS LINE IS LONG AND GROW MORE CAUTIOUS? 
 
    </div> 
 
    <div class="inner2"> 
 
    NOW THIS LINE COULD BE LONG 
 
    </div> 
 
</div>