Word break split issues

  • Resolved mrichman5

    (@mrichman5)


    8 years, 10 months ago

    Hi. I am trying to figure out why words are splitting at the end of the line in odd places. I’ve read quite a bit about it but still can’t figure out how to change it.

    I’m new to this but I updated the CSS to

    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    word-wrap: normal;

    in the Twenty Fifteen style.css file but am thinking maybe I am still missing something.

    here’s an example of how our blog posts are showing up

    https://www.teacherlists.com/blog/read-my-lists/

    Any ideas?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

  • @mrichman5,

    This is coming from your theme. Please remove te previous CSS changes and just add this:

    .two_third {
	word-break: normal !important;
}

    Good luck!

    Thread Starter mrichman5

    (@mrichman5)

    Thank you so much! It worked perfectly in Safari but I noticed Firefox was still splitting the words?

    @mrichman5,

    The break-word you used is not a valid option for word-break. Did you try the code I gave at all?

    A little research shows webkit supports it (which is why it works in Safari and Chrome), though it’s undocumented and definitely not a standard CSS syntax. It is a valid option for word-wrap though, which itself has been renamed overflow-wrap.

    If you want to dig into this further:

    word-break

    word-wrap

    word-break vs word-wrap

    The bigger issue here is your site has a ton of HTML and CSS errors (you don’t even ave a DOCTYPE declaration). Not the end of the world, but the trouble is when the rules are not followed, different browsers try their best (in different ways) to render the non-valid code the best they can — which leads to different views in different browsers.

    Thread Starter mrichman5

    (@mrichman5)

    Thanks.

    I absolutely used your code and it worked on Safari which is what I use to usually view/update our Blog. Thank you!

    Unfortunately, I am just a marketing manager so very knew to this and I don’t handle the HTML and CSS on our site normally, I was just trying to troubleshoot some posts where the layout was off!

    Thanks for your help. I’ll read the links you shared and see if I can figure out how to make it work in Firefox.

    Hello mrichman5,

    I can see you have reverted to the code I gave, and I can see the breaks are GONE in Firefox, Internet Explorer, Google Chrome, and Opera (all on Windows) as well as Safari (on iPad).

    If you still see the breaks in Firefox, chances are Firefox has saved (cached) a copy of the previous CSS file. To test, open your CSS file in Firefox and check what code Firefox has (here’s the link: https://www.teacherlists.com/blog/wp-content/themes/Pim/style.css)

    If you see anything other than the code above, you need to force Firefox to discard its saved copy and grab the new one.

    You can do this by repeatedly pressing F5 or pressing Control+F5 (Command+F5 on Mac) until you see the new code, or going into your Firefox browser settings and clearing your history (everything).

    Good luck!

    Thread Starter mrichman5

    (@mrichman5)

    Thank you so much!!!

    Thread Starter mrichman5

    (@mrichman5)

    Thank you George!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Word break split issues’ is closed to new replies.