Button als Fließtext

[Gunnar Bittersmann]

Ein Button soll als Fließtext dargestellt werden. Rahmen weg, Hintergrund weg, Padding weg, Schrift geerbt – alles kein Problem, siehe Beispiel.

Nur ein Zeilenumbruch will mir nicht gelingen. Obwohl „Within“ noch in die Zeile passt, wird im Buttontext kein Zeilenumbruch gemacht. Selbst

button {
  appearance: none;
  display: inline;
  white-space: wrap;
}

hilft da nicht.

Gibt es für den Buttontext vielleicht noch ein Pseudoelement/eine Pseudoklasse (darf auch browserspezifisch sein), für die man das noch setzen könnte?

🖖 Live long and prosper

PS: <input type="button"/> verhält sich genauso.

[MudGuard]

Hi,

Ein Button soll als Fließtext dargestellt werden. Rahmen weg, Hintergrund weg, Padding weg, Schrift geerbt – alles kein Problem, siehe Beispiel.

Nur ein Zeilenumbruch will mir nicht gelingen. Obwohl „Within“ noch in die Zeile passt, wird im Buttontext kein Zeilenumbruch gemacht. Selbst

button {
  appearance: none;
  display: inline;
  white-space: wrap;
}

hilft da nicht.

Früher (HTML 4.01) waren die inputs (incl. select, textarea, ...) keine normalen inline-Elemente, sondern replaced-inline-Elements (genauer Name ist mir nicht mehr bekannt). Folge war, daß das styling dieser Elemente stark eingeschränkt war.

Ich weiß nicht, ob das immer noch so ist … (bin nicht mehr ganz so tief drin in der Webseiten-Entwicklung wie früher)

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Gunnar,

if you can't win, cheat.

Es ist semantisch vielleicht nicht so passend und es bräuchte etwas Javascript, aber man könnte ein a Element nehmen und mit Script wie einen Button agieren lassen. Dazu noch etwas aria…

Rolf

[Rolf B]

Hallo Gunnar,

meine Recherchen ergeben auch nicht viel. Nur eine ganz blöde Idee: Mach jedes Wort im Button-Text zu einem eigenen Button und behandle all diese Buttons gleich. Sieht halt nur doof aus, wenn man drübertabbt und die Accessibility ist auch verwirrend.

Konzept-Fiddle

Ob das zugänglich oder bedientauglich ist - keine Ahnung.

Rolf

[Martin]

Hi,

in der Theorie würde display: contents; das gewünschte visuelle Verhalten herbeiführen. Praktisch ist das aktuell leider (noch) nicht nutzbar.

[Raketenwilli]

Wenn Du ein <br> in Deinem Button notierst siehst Du die Katastrophe: Das display: inline wird nicht wie von Dir erwartet umgesetzt.

span, role="botton", aria-x="y" und ein paar Zeilen Javascript?

[Gunnar Bittersmann]

@@Raketenwilli

Wenn Du ein <br> in Deinem Button notierst siehst Du die Katastrophe: Das display: inline wird nicht wie von Dir erwartet umgesetzt.

Ja. Das läuft wohl darauf hinaus, was @MudGuard sagte: „replaced-inline-Element“.

span, role="botton", aria-x="y" und ein paar Zeilen Javascript?

Das läuft darauf hinaus, was @Rolf B sagte. Ob span oder a, ist dann egal.

Geht in meinem Fall nicht (oder nur mit noch viel mehr JavaScript), weil das Ding ein Popover steuern soll. AFAIS funktioniert das Popover-API nur mit <button> (bzw. <input type="button">).

Mit button geht’s, mit a geht’s nicht.

🖖 Live long and prosper