beatovich: Flexbox mit text-overflow links/start

Beitrag lesen

SELF-Forum

Flexbox mit text-overflow links/start

beatovich Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

hallo

Ich habe jetzt folgenden Code, der für meinen Fall funktionieren könnte:

Als besonderes Element gibt es

width:calc(99vw / 4 );

4 steht hier für die Anzahl der Flexbox-Children. Da würde ich noch gerne eine --nrOfChildren:4; einsetzen (mit JS manipulieren)

funzen tuts nur im FF. Anforderung ist moderne Desktop-Browser (ist für einen Editor)

Vielleicht willst du einen Code-Pen draus machen?

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="description" lang="de" content="Optional: Titel">
	<meta name="date" content="2018-10-31">
	<meta name="last-modified" content="2018-10-31">
	<title>Optional: Titel</title>
	<noscript><link rel="stylesheet" href="../css/nojs.css"></noscript>

<style>
*{
	margin:0; box-sizing:border-box;
	line-height:1.6;
}
#el547 { 
	display:flex; flex-flow:row; background:#fff; 
   width:100vw;
}
#el547  p {
	flex:1 2 auto; 
	display:flex; 
	margin:0;  
	width:calc(99vw / 4 );
	white-space:nowrap; 
}
#el547  p button {
   padding:0; border:0; background:#fff;
}
#el547  p button:nth-child(2n) { 
	width:2em; 
	color:red;
   border-right:0.1em solid #666;
}
#el547  p button:nth-child(2n+1) { 
	text-overflow:ellipsis; 
	overflow:hidden;
	min-width:5em;
	direction:rtl; 
	flex:1 1 auto;
}
</style>

</head>
<body>

<h1>Beispiel CSS: Tab-Menu Control Leiste</h1>
<p>Besondere Anforderung: overflow:ellipsis links statt rechts.</p>

<div id="el547">
  <p><button>new.html</button><button>x</button</p>
  <p><button>http://localhost/new_2018-10-31.html</button><button>x</button</p>
  <p><button>http://localhost/new_2018-10-32.html</button><button>x</button</p>
  <p><button>http://localhost/new_2018-10-33.html</button><button>x</button</p>
</div>


</body>
</html>
--
https://beat-stoecklin.ch/pub/index.html
Beitrag melden
–
Informationen zu den Bewertungsregeln