beatovich: Flexbox mit text-overflow links/start

hallo

folgendes Pseudo-HTML

<flexbox>
  <flexboxchild>
    <label>most significant information at the end HERE</label>
  </flexboxchild>
</flexbox>

Die CSS-Aufgabe besteht darin, bei Bedarf das Label bei Start/Links überfliessen zu lassen. Der Signifikante Teil am Ende / Rechts soll jedoch sichtbar bleiben.

Also quasi text-overflow:ellipsis-start

Das Label-Element habe ich eingefügt, weil meiner Vermutung/Versuche nach ohne ein solches keine Lösung existiert. Eine Lösung ohne inneres Element ist ebenso willkommen.

Praktische Anwendung: lange uris in Flexboxen.

akzeptierte Antworten

  1. @@beatovich

    Die CSS-Aufgabe besteht darin, bei Bedarf das Label bei Start/Links überfliessen zu lassen. Der Signifikante Teil am Ende / Rechts soll jedoch sichtbar bleiben.

    Also quasi text-overflow:ellipsis-start

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

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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.

      1. @@beatovich

        <b>My treasure –</b><b>– my own</b>

        Ich Kulturbanause!

        Es muss natürlich „My precious“ heißen! Im Pen berichtigt.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. 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>
          
          
          1. Hallo beatovich,

            Vielleicht willst du einen Code-Pen draus machen?

            Darf es auch das Wiki sein?

            Bis demnächst
            Matthias

            --
            Pantoffeltierchen haben keine Hobbys.
    2. Hej Gunnar,

      @@beatovich

      Die CSS-Aufgabe besteht darin, bei Bedarf das Label bei Start/Links überfliessen zu lassen. Der Signifikante Teil am Ende / Rechts soll jedoch sichtbar bleiben.

      Also quasi text-overflow:ellipsis-start

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

      Ich will ja kein Spielverderber sein, aber bei mir (Mojave, Safari) klappt es mal wieder nicht…

      Text wird rechts abgeschnitten, nicht links

      Marc

      PS: Findet noch jemand das neue Bildschirmfoto-Tool von OSX so geil wie ich?