Flexbox mit text-overflow links/start

[beatovich]

hallo

Also quasi text-overflow: ellipsis; direction: rtl. Flexbox brauchst du dazu nicht. Mehrere verschachtelte Elemente auch nicht. Guckst du.

Ich habe es für meine Bedürfnisse etwas angepasst:

<p>
	<b>My treasure –</b>
	<span class="truncate-left">
		https://example.net/very/long/path/to/a/very/well/hidden/treasure
	</span>
	<b>– my own</b>
</p>

body
{
	font: 1.5em Calibri, sans-serif;
}

p{ display:flex; flex-flow:row;}
p * {border:1px solid #ccc; white-space:nowrap;flex: 1 1 auto;}

.truncate-left
{
	display: inline-block;
	max-width: 100%;
	vertical-align: bottom;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	direction: rtl;
	min-width:5em;
}

Das erfüllt das von mir erwünschte Verhalten.

vielen Dank.