Verhindert, dass der Text aus dem Container verschwindet, wenn er mehr als 90% Breite hat

8

Ich möchte, dass der Fortschrittstext innerhalb des Containers progressish liegt, auch wenn die Breite für ein Beispiel 100% ist. Wie es jetzt ist, wird der Text rechts vom Container fixiert, wie im ersten Bild unten zu sehen ist.

Wenn die Breite des Fortschrittsbalkens für ein Beispiel 40% ist, sieht es (wie erwartet) so aus:

Aber wenn der Fortschritt entweder 90% oder 100% ist, möchte ich, dass der Text ganz rechts neben dem Fortschrittsbalken steht:

%Vor% %Vor%

Wie kann ich das erreichen? Sie können den gesamten Quellcode unter jsFiddle sehen: Ссылка .

    
Erik 07.08.2017, 13:35
quelle

4 Antworten

5

Wenn die Breite der Bildlaufleiste fest ist (300px) und die Textbreite (der Text, nicht das Element) mehr oder weniger fest ist (etwa 85px - von 1% bis 100%), setzen Sie den Text absolut positioniertes Pseudoelement Kind des .progress und setze es auf width und max-width :

%Vor%

Wenn Sie den Text nach rechts ausrichten, wird er nach dem Balken angezeigt, bis max-width erreicht ist.

%Vor% %Vor% %Vor%
    
Ori Drori 07.08.2017, 14:01
quelle
1

In anderen Antworten, wenn Änderung width auf section Element, Code nicht gut funktionieren.aber meine Antwort, nicht von width of section abhängen.

A) Rechteck:

%Vor% %Vor% %Vor%

B) Kreis:

%Vor% %Vor% %Vor%
    
Ehsan 08.08.2017 02:20
quelle
1

Sie können flexbox für #text > div und pseudoelement mit benötigtem width verwenden. Fügen Sie auch white-space: nowrap hinzu, damit der Text nicht umbrochen wird. % Co_de% s wurde durch id es ersetzt, um mehrere Fortschrittsbalken anzuzeigen.

Demo:

%Vor% %Vor%

Zeigen mit Animation:

%Vor% %Vor%
    
Vadim Ovchinnikov 07.08.2017 14:02
quelle
0

Geben Sie einfach dem Container für den Text eine Eigenschaft mit maximaler Breite, für mich funktioniert es mit 69%, aber Sie können auch in px angeben. überprüfe meinen Codepen: Ссылка

%Vor%     
Juan SA 07.08.2017 14:01
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Vollständige Nutzung von Pipelines am Kaby Lake