Text geht über Button hinaus

[Cjls96]

AA

 

[abcddcba]

Es ist auf jeden Fall gut, dass du nicht mal erwähnst, womit du überhaupt den Button programmiert hast ...

Und ja, es ist CSS aber meinst du nicht, einfach das Code snippet zu zeigen, wäre nützlich hier?

 

[ayngush]

Mein Vorschlag wäre folgender:

 

[psYcho-edgE]

@ayngush ich liebe dich gerade sehr

@Cjls96 mal ein Tip: ohne Code ist es immer unsinnig sowas zu fragen. Wir wissen nichtmal ob das ein echter Button ist oder ein entsprechend gestylter anderer Tag, geschweige denn die gerade verwendeten Styles.

 

[Cjls96]

Entschuldigung, hier der Code.
Bootstrap wurde verwendet.

 

[DubZ]

wir können dir erst dann helfen wenn du uns sagst, wie das Ergebnis aussehen soll.

 

[psYcho-edgE]

@Cjls96 soll der Text umbrechen oder der Button "mitwachsen"?

 

[Cjls96]

Prinzipiell soll er so aussehen @ayngush vorgeschlagen hat. Wenn ich die Seite aber verkleinere, schrumpfen die Button (das ist gewollt, da responsive). Deshalb fällt wohl leider das "mitwachsen" vom Button flach. Meiner Meinung nach bleibt nur, dass sich der Text verkleinert oder ein Umbruch. Oder sehe ich das falsch?

 

[DubZ]

@Cjls96 füg in das <span> noch ein style="word-wrap:break-word;" ein.

also

<button id="reconfig" type="button" class="btn btn-md dropdown-toggle disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Rekonfiguration"><span class="adapt" style="word-wrap:break-word;">Rekonfiguration</span><br><i class="fas fa-cogs"></i></button>

 

[Cjls96]

Danke hab das jetzt mal ausprobiert, aber gefällt mir hier leider nicht, da der Button dann höher wird. Dann bleibt mir wohl nicht anderes übrig als die font-size bei kleineren Weiten anzupassen, so dass der Text komplett in den Button passt

 

[ayngush]

Aha, da wird doch langsam ein Schuh draus. Es geht also um einen mobile Viewport, auf den der Button so stark (von seinem umgebenden Container) zusammen geschoben wird, dass der Text nicht mehr vollständig reinpasst.

Dafür gibt es jetzt drei Lösungsansätze:

1. Den Text dynamisch "abschneiden" (truncate) (dazu die Klasse text-truncate dem button hinzufügen)

2. Auf ganz kleinen Devices (Telefonen) platziert man eigentlich keine Container / Elemente mehr nebeneinander, sondern alles untereinander, damit würde der Button dann die "ganze" breite des Viewport einnehmen und der Text müsste wieder passen. (da müsste man aber mehr vom umliegenden Code sehen, um beurteilen zu können, welche Container man wie anpassen müsste)

3. Den Inhalt des Buttons auf kleinen Viewports auf das Icon reduzieren und auf größeren Viewports, auf denen der Button groß genug für den Text ist, den Text mit anzeigen. Dazu den Span-Tag des Textes die Klassen d-none d-lg-inline hinzufügen und das br-Tag in das span-Tag verschieden.

4. Soll bei der Lösung 3 die Höhe beibehalten werden, einfach den Breakpoint (br-Tag) nicht mit ausblenden, indem er in nicht das span-Tag verschoben wird.

Das sieht dann im Ergebnis der vier Varianten so aus (denk dir mal das O als die Zahnrädchen. Hatte keine Lust Font-Awesome im Testcode einzubinden)

 

[Cjls96]

Das mit text-truncate ist top. Vielen herzlichen Dank!

 

[ayngush]

Bitte, gerne. Für weitere Text-Problemchen, ruhig mal da nachschauen: https://getbootstrap.com/docs/4.2/utilities/text/

Bootstrap ist eigentlich ein sehr mächtiges Frontend-Framework. So mächtig, dass man sogar

#reconfig{
    background-color: #00BEFF;
    float: right;
    margin: 10px 5px 10px auto;
    width: 100%;
}

auf

<button id="reconfig" type="button" class="btn btn-info float-right mt-2 mr-1 mb-2 ml-auto w-100 dropdown-toggle disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Rekonfiguration">
    ...
</button>

reduzieren und sich damit den Teil im Custom Stylesheet sparen kann, was zur Steigerung der Performance (Page Renderer) beitragen dürfte.

Die aria-Angaben sind übrigens quasi nur für Screenreader interessant. Wenn dein Projekt also nicht Barrierefrei sein muss, kann man die sich auch sparen.