CSS left-align float, но ограничение по правому краю

Question

Есть ли способ CSS, чтобы встроенный блок был выровнен по левому краю, но когда контейнер становится маленьким, он должен быть ограничен правым краем и вместо этого имеет то, что находится на слева от блока, и чести текстового эллипса?

Когда контейнер широка я хочу что-то вроде

Some longish text goes here [My Block]   |<- right edge 

и когда контейнер узок

Some longish...[My Block] |<- right edge 

идеально он должен быть динамичным и жидкости при изменении размеров контейнера.

удлиненно тест и текст «Мой Блок» не не являются постоянными, и ни являются их ширина (так с помощью таблицы с фиксированной раскладки не работает, а обычная таблица не позволяет текст-многоточие в работа)

редактировать: иллюстрации

редактировать 2: жирным шрифтом на факт ширины не известны, так что любое решение с участием CSS с ширина текста или блока, выраженная в пикселях или процентах, не будет работать :(

Answer 1

Найден решение с гибкой компоновкой и гибким термоусадочным, который выходит очень короткий & просто. Он не будет работать на старых IE и Android < = 4,3

проверяемых фрагменты: http://jsbin.com/nodironodo/1/edit?html,css,output

Код для ссылки ниже без косметических аспектов

.container { 
 
    display: flex; 
 
    white-space: nowrap; 
 
} 
 

 
.ellipsis { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 

 
.block { 
 
    flex-shrink: 0; 
 
}

<div class="container"> 
 
    <div class="ellipsis">Some longish text goes here</div> 
 
    <div class="block">My Block</div>  
 
</div>

Answer 2

Используйте display:inline-block с text-overflow: ellipsis. Посмотри ниже URL:

http://jsfiddle.net/jjmxL9hr/

Я надеюсь, что это решит разъяснение. Дайте мне знать для каких-либо разъяснений.

Answer 3

Использование медиа-запросов должно быть выполнено.

.container{ 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.container > p{ 
 
    float: left; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    margin: 0; 
 
} 
 

 
.container > div{ 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 

 
@media screen and (max-width: 480px){ 
 
    html .container > p{ 
 
    max-width: 60%; 
 
    } 
 
}

<div class="container"> 
 
    <p class="text-primary">Some longish text goes here some longish text goes here</p> 
 
    <div class="my-block">[My Block]</div> 
 
</div>