table-cell + css display:block;word-break:break-all;

[digitalwerk]

Hallo Forum, Besucher + Nutzer,

Probleme mit CSS und Text Inhalt im Mobilen Bereich, der Desktop Bereich 100 % OK. Alle Unterseiten (in meiner Angabe "Instrumente" : problematische Seite)

Folgend sind Divboxen gestaltet :

Quelltext hier
<!-- // Tabellen DIV Boxen Starter \\ -->
<div class="table">
<div class="table-row">
<!-- // Tabellen ZELLE Links DIV Boxen Starter \\ -->
<div class="table-cell LinksA">
123
</div>
<!-- // Tabellen ZELLE Mitte DIV Boxen Starter \\ -->
<div class="table-cell">
<h1>Überschrift</h1>
Alexandre Pere et Fils wurde als Harmoniumbauer auf der ersten franz&ouml;sischen Weltausstellung ausgezeichnet mit der Ehrenmedaille "Medaille Honneur Exposition Universelle de 1855 Paris".
    <br><br>
    Baujahr zwischen 1872-1877, Rue Richelieu 106, Paris, Instrumentennummer 107037 
    Geh&auml;use Palisander, Breite 108 cm, Tiefe 43 cm, H&ouml;he 84 cm, Stoff blauer Samt 
    Einstimmig, Flute 8 Fu&szlig;, einzelne Klangzungen, Tastaturbelag Knochen 
    Registerz&uuml;ge
    <br><br><br>
    <br>
... (bla bla bla Text)<br>
</div>
</div>
<div class="table-cell RechtsB">
<!-- // Tabellen ZELLE Rechts DIV Boxen Starter \\ -->
123
</div>
</div>
</div>
</div>
</body></html>

Hinweis : Der Code gilt nur zum Verständnis - bitte guckt bei der Problematischen Seite in den Instrumenten Unterseiten

Viewport @media only screen and (max-width: 1010px) { .table {border:none;} .table-row,.table-cell {display:block;word-break:break-all;} .table-cellM {} .table-row {margin-bottom:20px;} }

Soweit so gut, die Anweisung CSS " display:block;word-break:break-all; " bricht für die Mobilen Geräte jeweils die Linke + Rechte + Mitte Spalte (untereinander).

Bis hier hin ist auch soweit alles OK, doch der Mitte Text, wird in seinen Zeilen umbrochen und Buchstaben abschnitten.

bsp: ersten französischen

erste n französ ischen

Im Desktop Bereich ist alles soweit Gut und OK, nur der Mobile Teil macht seine Probleme mit dem Mittleren Text.

Ich hatte gar versucht eine Divbox extra um den Text zu legen, doch der Viewport greift nicht und den Text kleiner als 9px zu machen, halte ich für insb. Smartphones als überhaupt nicht Sinnvoll.

Seite unter "http" ** nicht **die Index Seite - sondern die Unterseiten (Instrumente)

(Live : Siehe Problematische Seite )

Suche Hilfe, wer weiss hier eine Abhilfe ?

[Gunnar Bittersmann]

@@digitalwerk

Bis hier hin ist auch soweit alles OK, doch der Mitte Text, wird in seinen Zeilen umbrochen und Buchstaben abschnitten.

Wenn du das Verhalten von word-break: break-all nicht haben willst, solltest du das auch nicht angeben.

Und da gibt’s noch so einiges, was du nicht so machen solltest: <font>, ä, …

Der Code sieht aus wie mit einem Tool erstellt, das (gefühlt) älter ist als die Orgeln. Nur dass das Ding nicht als „vintage“ erhaltenswert ist.

Wenn du einen Neubau in Erwägung ziehst (was du IMHO tun solltest), helfen dir die Tutorials zu Grid-Layout weiter.

Kwakoni Yiquan