Flexbox mit text-overflow links/start bearbeitet von beatovich 31.10.2018 13:24 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? ~~~html <!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>
Flexbox mit text-overflow links/start bearbeitet von beatovich 31.10.2018 13:25 hallo Ich habe jetzt folgenden Code, der für meinen Fall funktionieren könnte: Als besonderes Element gibt es width:calc(99vw / 4 ); 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? ~~~html <!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>
nicht angemeldet
