Text wird auf iphone zerhackt

4tdU

Hallo,

auf meiner Homepage http://www.tressardinhas.de wird auf iphones der Text zerhackt, d.h. Wörter werden getrennt.
Das finde ich nicht schön. Gibt es eine Möglichkeit das zu ändern?

Viele Grüße und Danke

Harry

Srceenshot:

style.css:

Code

/* Theme Name:   Tres Sardinhas
 Theme URI:    http://tressardinhas.eu/
 Description:  Twenty Twelve Child
 Author:       Mark Max Henckel
 Author URI:   http://publizieren-im-netz.de
 Template:     twentytwelve
 Version:      1.1
 Text Domain:  twentytwelve
*/




/* Basics */
body,body.custom-font-enabled{color:#000;font-family:Arial, Helvetica, sans-serif;font-size: 16px;font-size: 1rem;}
.site-header h1,
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul{text-align:center;border:none;}
#page.site{overflow:visible;}
/* Farben */
.main-navigation li a,.site-header h1 a, .site-header h2 a,a,a:visited,.entry-content a:visited, .comment-content a:visited{color:#000;}
.main-navigation li a{color:#000;font-size:1.2em;font-weight:bold;text-transform:none;}
a:hover,.main-navigation li a:hover,.site-header h1 a:hover, .site-header h2 a:hover{color:#515151;}




.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius:0;
    box-shadow:none;
}
.site-content article{border:none;}
a.aname{font-weight:bold;cursor:default;}
.site-content{
    margin:0;
}
.site-content article{
    max-width: 960px;
    overflow:visible;
    max-width: 68.571428571rem;
    text-align: center;
    padding:0 2% 0 6%;
    margin: 0 auto;
}
.category .site-content article,.single .site-content article{
    text-align:left;
}
.category #page.site,.single #page.site{
    max-width: 57.571429rem;
}
.page-id-28 .site-content article{
    max-width: none;
    width:960px;
}
.site-content .clearfix{
    clear: both;
    float: left;
    margin-top: 6%;
}
/* Startseite */
.alignleft.box{width:35%;font-weight:bold;margin-right:5%;}
.box img.alignleft{width:auto;margin:0;}
.alignright.box{width:35%;float:left;text-align:left;}
.home .alignright.box{width:37%;}
.alignright.box a{font-weight:bold;}
.alignright.box h2{font-size:2em;font-family: Arial;}
.alignright.box h2,.alignright h3{clear:none;margin:0;}
.alignright.box h3{margin:0 0 1em;}
.alignright.box p{font-family: courier;margin:0 0 1em;font-size: 1.1em;}
/* Form */
.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
    width: 100%;
}
.gform_confirmation_message_1 gform_confirmation_message{
    color:#FC0;
    font-style:italic;
}
body .gform_wrapper span.ginput_total {
    font-size: 2.2em;
}
/* Footer */
footer[role="contentinfo"]{
    font-size:9px;
    text-align:center;
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Versuch es mal mit:

Code

.site-content article {
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none; 
}

am Besten ganz am Ende deiner CSS.

4tdU

danke SirEctor, hab ich versucht. Die Trennstriche sind dann weg. Es werden aber trotzdem mitten im Wort die Zeilen umgebrochen.
Ist es möglich, daß im Wort nicht die Zeile umgebrochen wird. Z.B. die Schriftgröße so verkleinert wird, daß eine Wort in eine Zeile passt?

SirEctor

Versuche es mal, indem du den Code von oben um word-wrap: normal; ergänzt.

Natürlich könnte man auch per Media-Query die Schriftgrößen ändern.

4tdU

ich hab word-wrap: normal; in die /* Basics */ von style.css gepackt. Das ändert aber nichts. Wie ändere ich die Schriftgröße mit Media-Query?

Code

/* Theme Name:   Tres Sardinhas
 Theme URI:    http://tressardinhas.eu/
 Description:  Twenty Twelve Child
 Author:       Mark Max Henckel
 Author URI:   http://publizieren-im-netz.de
 Template:     twentytwelve
 Version:      1.1
 Text Domain:  twentytwelve
*/




/* Basics */
body,body.custom-font-enabled{color:#000;font-family:Arial, Helvetica, sans-serif;font-size: 16px;font-size: 1rem;word-wrap: normal}
.site-header h1,
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul{text-align:center;border:none;}
#page.site{overflow:visible;}
/* Farben */
.main-navigation li a,.site-header h1 a, .site-header h2 a,a,a:visited,.entry-content a:visited, .comment-content a:visited{color:#000;}
.main-navigation li a{color:#000;font-size:1.2em;font-weight:bold;text-transform:none;}
a:hover,.main-navigation li a:hover,.site-header h1 a:hover, .site-header h2 a:hover{color:#515151;}




.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius:0;
    box-shadow:none;
}
.site-content article{border:none;}
a.aname{font-weight:bold;cursor:default;}
.site-content{
    margin:0;
}
.site-content article{
	max-width: 960px;
	overflow:visible;
    max-width: 68.571428571rem;
	text-align: center;
    padding:0 2% 0 6%;
	margin: 0 auto;
}
.category .site-content article,.single .site-content article{
	text-align:left;
}
.category #page.site,.single #page.site{
	max-width: 57.571429rem;
}
.page-id-28 .site-content article{
	max-width: none;
    width:960px;
}
.site-content .clearfix{
	clear: both;
    float: left;
    margin-top: 6%;
}
/* Startseite */
.alignleft.box{width:35%;font-weight:bold;margin-right:5%;}
.box img.alignleft{width:auto;margin:0;}
.alignright.box{width:35%;float:left;text-align:left;}
.home .alignright.box{width:37%;}
.alignright.box a{font-weight:bold;}
.alignright.box h2{font-size:2em;font-family: Arial;}
.alignright.box h2,.alignright h3{clear:none;margin:0;}
.alignright.box h3{margin:0 0 1em;}
.alignright.box p{font-family: courier;margin:0 0 1em;font-size: 1.1em;}
/* Form */
.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
    width: 100%;
}
.gform_confirmation_message_1 gform_confirmation_message{
    color:#FC0;
	font-style:italic;
}
body .gform_wrapper span.ginput_total {
    font-size: 2.2em;
}
/* Footer */
footer[role="contentinfo"]{
    font-size:9px;
	text-align:center;
}

Alles anzeigen

SirEctor

Halte dich doch bitte an meinen Code

Code

.site-content article {
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none; 
  word-wrap: normal;
}

Wenn das nicht funktioniert, versuche es mit !important.

4tdU

Guten Morgen,
habe Deinen Code aus Post #6 in style.css eingefügt. Es funktioniert, die Wörter werden nicht mehr getrennt. Vielen Dank.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Text wird auf iphone zerhackt

Jetzt mitmachen!