Long worded album descriptions doesn't scale to smaller screens

[tomsit]

▶🚶‍Reproduction steps

1. Create album with a long worded album title
2. Scale down to phone size

Example: https://freeimage.host/a/windows96-one-hundred-mornings.XZFt

😢Unexpected result

You have to side scroll, thus giving a mobile friendly error in search console.

 

[DeCysos]

<style>
.auto-hyphenation {
    width:44%;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
    hyphens: auto;
}
</style>

<div class="box2">
    <h4>Mit Silbentrennung</h4>
    <p>Die deutsche Sprache kennt so schöne Bandwurmworte wie Donaudampfschifffahrtsgesellschaft oder Auslandskrankenversicherungspolice, auch wenn die zugegebenermaßen nur in speziellen Kontexten genutzt werden.
    Und wie soll der Browser die Zeichenfolge -1111 behandeln, falls diese, abhängig von der Größe des Viewports, am Zeilenende steht? Direkt nach dem Minuszeichen zu trennen, wäre die denkbar schlechteste Lösung.
    <br />
    Auch eine lange URL oder Telefonnummer mit Durchwahl oder wird nicht mehr getrennt; Beispiel: +49-(0)211-1234-5678
    <br />
    Was aber wenn hinter einer Zahl eine Einheit (wie Grad, Meter, Gewicht, Währung, etc.) steht? Die möchte man meistens auf gar keinen Fall getrennt sehen. Hier: "150 Euro" und "-17° C" als Beispiele.
    </p>
</div>

 

[Rodolfo]

Oh my...


I designed the UI in English language. I never expected to have words that long.