Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved PostPins Splitting title across words

Question

Posted · Report post

Hi, loving this section but can I stop the title words being split across lines i.e. seafoo-d Would love to tidy this up. See www.oystersaustraliablog.org.au for where this is occuring. Lynsey

Share this post


Link to post
Share on other sites

24 answers to this question

Posted · Report post

You currently have this css in .post pin.


.postpin {

-moz-hyphens: auto;

background: none repeat scroll 0 0 #F6F6F6;

border: 1px solid #FFFFFF;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

margin: 8px 0;

word-break: break-all;

}

Change "break-all" to "keep-all" and it will wrap the text. Also moz-hyphens none.

.postpin {

-moz-hyphens: none;

background: none repeat scroll 0 0 #F6F6F6;

border: 1px solid #FFFFFF;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

margin: 8px 0;

word-break: keep-all;

}

http://screencast.com/t/F6YOyjBY8lB

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny, Just to let you know that the issue is still occurring on safari, any extra fix for that. Sorry haven't been able to test on IE yet.

Share this post


Link to post
Share on other sites

Posted · Report post

Yes Hi - my client chasing me on this again - any fixes for this.

Share this post


Link to post
Share on other sites

Posted · Report post

OK, I have finally figured it out! :D Add this to your custom CSS:

.headline pin-title a { -moz-hyphens: none; }
Let me know if that works.
grr :D Add this one, I just tried this myself and it appears to work.
.headline a { -moz-hyphens: none; }

Works in safari but still problem persisting in firefox

Share this post


Link to post
Share on other sites

Posted · Report post

As you can tell, it wasn't us, but the browser that un-did the fix we provided earlier. That should indicate to your client that this is a browser issue more so than one with our Post Pins.

The options other than the ones provided by Danny would be to include a no-wrap in the CSS, but I can imagine that's going to break your post pins entirely. Another would be to include a

<br />[/CODE]

in the title, but that's going to adversely affect how the title appears elsewhere. Changing the post titles to be XX characters long might work, but frankly, it would be so short that you may not be able to convey the concept of the post.

Danny or others in our team may have a better idea, but I think the solution unfortunately, is to explain to your client that within confined spaces, text often wraps and hyphenates.

The only plugins that might have been useful haven't been updated in quite some time by their authors. I hoped I could find a plugin solution that might work.

Share this post


Link to post
Share on other sites

Posted · Report post

sorry for delayed reply - that also worked for me - thank you veru much

Share this post


Link to post
Share on other sites

Posted · Report post

I am just informed that this javascript will work though I do not know it and haven't tested it.

http://www.frequency-decoder.com/demo/slabText/

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you - but is that code showing me more how to get them to break across lines rather than not too - apologies if I am not understanding.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Lynsey, Can you take a screenshot of this issue please, as I have visited your site and was unable to see hyphenation occurring in your titles. Also, which browser are you using ?

Share this post


Link to post
Share on other sites

Posted · Report post

You currently have this css in .post pin.


.postpin {

-moz-hyphens: auto;

background: none repeat scroll 0 0 #F6F6F6;

border: 1px solid #FFFFFF;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

margin: 8px 0;

word-break: break-all;

}

Change "break-all" to "keep-all" and it will wrap the text. Also moz-hyphens none.

.postpin {

-moz-hyphens: none;

background: none repeat scroll 0 0 #F6F6F6;

border: 1px solid #FFFFFF;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

margin: 8px 0;

word-break: keep-all;

}

http://screencast.com/t/F6YOyjBY8lB

Thanks it worked,

Thanks again.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny, two instances on this screenshot media cover-age and POMS Resistance Screen-Shot-2012-08-28-at-5.03.23-PM.png I am using firefox.

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome, glad it worked :-)

Share this post


Link to post
Share on other sites

Posted · Report post

OK, I have finally figured it out! :D Add this to your custom CSS:

.headline pin-title a { -moz-hyphens: none; word-break: keep-all; }

Let me know if that works.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny, Really sorry but this did not resolve the problem my end, anything else I could try, or anything I could be doing wrong, I inserted at the start of the custom CSS and the end, made no difference? Appreciate your help.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, Try this instead:

.headline .pin-title { -moz-hyphens: none; word-break: keep-all;}

Share this post


Link to post
Share on other sites

Posted · Report post

And actually, the issue has also come back with the latest Firefox update. Still fine in Chrome though.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny, Sorry still no luck.

Share this post


Link to post
Share on other sites

Posted · Report post

grr :D Add this one, I just tried this myself and it appears to work.

.headline a { -moz-hyphens: none;word-break: keep-all; }
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

You an absolute star - worked perfect. Thanks for persisting.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi - Still any more ideas for this? I've tried just about everything, and nothing is fixing this issue.

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, happy to help!

Share this post


Link to post
Share on other sites

Posted · Report post

Let me second that thank you!

Share this post


Link to post
Share on other sites