Przepraszam za temat, ale nie mam zielonego pojęcia jak zatytułować.

Mam następujący problem. W DIV jest tekst, który wychodzi poza jego szerokość i dodanie stylu (text-overflow itp) dostaje na końcu trzykropek oznaczający, że dalej jest jeszcze troche tekstu, ale się nie zmieścił.Schody zaczynają się, gdy chcę wrzucić DIV z przyciskami (BUTTON) po prawej stronie tego tekstu. W poniższym Fiddle jest zaprezentowane jak to działa teraz. Na 70% przeglądarek, tekst wchodzi pod przyciski i nie ładnie to wygląda, tylko w Chrome działa to zgodnie z oczekiwaniami, ale nie jestem pewny, czy powinno tak działać, czy zrobiłem gdzieś jakiś błąd, że Chrome tak a nie inaczej to zinterpretowało. W Chrome, tekst kończy się trzykropkiem tuż przed przyciskami i bardzo ładnie i schludnie to wygląda.

https://jsfiddle.net/f62jq9ro/2/

Czy da się wykonać ten sam zabieg, lecz by działał chociaż na FF i na Chrome? Idealnie byłoby gdyby działało na wiekszej ilości przeglądarek. Zastrzegam, że chciałbym uniknąć używania JS.

EDIT:
Przepraszam, pozostałość po szukaniu rozwiązania się wkleiła. Link już poprawiony.

Na pewno odpowiedni przykład podałeś w linku?


Ustaw padding-right dla div.bar o szerokości div.btns z marginesami, skróć o ten padding długość div.bar, a div.btns ustaw absolutnie z right:10px;
Albo owiń tekst w dodatkowy div i dla niego ustal text-overflow.

https://jsfiddle.net/f62jq9ro/4/

Powinno działać .

@Tuminure Działa pięknie, dziękuję Ci, o takie coś mi właśnie chodziło