beatovich: Flexbox mit text-overflow links/start

SELF-Forum

Flexbox mit text-overflow links/start

beatovich Homepage des Autors
– Informationen zu den Bewertungsregeln

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.

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

akzeptierte Antworten

  1. Flexbox mit text-overflow links/start

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@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
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Flexbox mit text-overflow links/start

      beatovich Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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.

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

      1. Flexbox mit text-overflow links/start

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. 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

          1. Flexbox mit text-overflow links/start

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo beatovich,

            Vielleicht willst du einen Code-Pen draus machen?

            Darf es auch das Wiki sein?

            Bis demnächst
            Matthias

            --
            Pantoffeltierchen haben keine Hobbys.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    2. Flexbox mit text-overflow links/start

      marctrix Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln