Danke für den Pretest-Link.
Sie binden das Lautsprecher-Symbol explizit mit negativem Abstand (margin) ein:
<a class="counter" ... style="float: right; margin: -0.2em 0 -0.5em 0"><img src="TTS.png" class="s2mIgnore"></a>
Das führt dazu, dass Sie explizit erlauben, dass es sich mit dem Text überschneidet. Eine mögliche Lösung wäre demnach, diese Abstände korrekt zu konfigurieren:
margin: 0 0 1em 2em;
Damit das mit dem float: left funktioniert, müsste das Element aber am Anfang des Itemtexts stehen, nicht am Ende.
Wenn Sie stattdessen des Text früher umbrechen möchten, könnten Sie das mit dem folgenden CSS-Code erreichen:
.s2iSelection.dynamic div.label.second {
padding-right: 40px;
}
Daber dann wird das Lautsprecher-Symbol (als Teil des Textes) auch verschoben, und es ist erstmal nichts erreicht. Um das zu kompensieren, müssten Sie dem Lautsprecher-Symbol rechts einen negativen Abstand erlauben:
margin: -0.2em -40px -0.5em 0;
Soweit ich sehe, haben Sie die Sprachausgabe ohnehin manuell bei jedem Item eingebunden? In diesem Fall wäre die Platzierung am Anfang mit korrektem Abstand vermutlich die beste Lösung.
Mittelfristig würde ich empfehlen, dass Sie mit JavaScript arbeiten. Heißt, Sie setzen nur noch ein <span class="speak"></span> in die Items. Und dann lassen Sie am Ende der Seite einen JavaScript-Code laufen, welcher sich aus dem Eltern-Element aller solcher <span>-Elemente den Text holt und das Lautsprechersymbol mit Link an der (dann jeweils passenden) Stelle ergänzt. Das wäre auch insofern von Vorteil, als man die Platzierung und die Darstellung dann nur an einer Stelle (im JavaScript-Code, der in einem Textbaustein gespeichert wäre) ändern müsste.