Jump to content


Photo
- - - - -
Resolved

PostPins Splitting title across words



Best Answer James B , 13 October 2012 - 02:26 AM

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 Go to the full post


  • Please log in to reply
24 replies to this topic

#1 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 28 August 2012 - 12:16 AM

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 August 2012 - 01:21 AM

Lynsey, Please read this

Please Login or Register to see this Hidden Content

If you apply that code to the post pin element, then you should resolve this issue.

#3 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 28 August 2012 - 01:51 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 August 2012 - 06:56 AM

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 ?

#5 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 28 August 2012 - 07:10 AM

Hi Danny,

two instances on this screenshot media cover-age and POMS Resistance

Posted Image

I am using firefox.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 August 2012 - 09:22 AM

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

Please Login or Register to see this Hidden Content

Let me know if that works.



#7 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 28 August 2012 - 09:36 AM

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.

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 August 2012 - 09:51 AM

Hi, Try this instead:

Please Login or Register to see this Hidden Content



#9 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 28 August 2012 - 09:59 AM

Hi Danny, Sorry still no luck.

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 August 2012 - 10:18 AM

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

Please Login or Register to see this Hidden Content


  • timd likes this

#11 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 28 August 2012 - 10:26 AM

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

#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 August 2012 - 12:40 PM

No problem, happy to help!

#13 sarahsprague

sarahsprague

    Member

  • Members
  • 14 posts

Posted 28 August 2012 - 03:03 PM

Let me second that thank you!

#14 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 29 August 2012 - 01:40 AM

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.

#15 sarahsprague

sarahsprague

    Member

  • Members
  • 14 posts

Posted 31 August 2012 - 02:36 PM

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

#16 sarahsprague

sarahsprague

    Member

  • Members
  • 14 posts

Posted 06 September 2012 - 11:43 PM

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

#17 progressive01

progressive01

    Advanced Member

  • Members

  • 79 posts

Posted 07 October 2012 - 10:56 PM

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

#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 October 2012 - 03:37 AM

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

Please Login or Register to see this Hidden Content

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.

#19 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 October 2012 - 02:21 PM

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

Please Login or Register to see this Hidden Content



#20 sakkthi subramaniyam

sakkthi subramaniyam

    Advanced Member

  • Members
  • 76 posts
  • Framework Version:Latest version
  • Country: Country Flag

Posted 09 October 2012 - 03:07 PM

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

Please Login or Register to see this Hidden Content

Let me know if that works.

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

Please Login or Register to see this Hidden Content

Works in safari but still problem persisting in firefox





Also tagged with one or more of these keywords: Resolved