Recent posts word break css question

[Pbalazs89]

Hi there,

I’m building a site here:

http://www.padthai.decorolux.com/

I have a recent posts section in the middle of the page. The thing is, titles are often too long to display. Right now it cuts it off which is fine, but it often cuts down the last couple of letters of a word. Is there a way to force it to display only full words and have the ellipsis after that based on the available length?

I tried adding stuff like word-wrap:break-word / but it does not do the trick. Thanks!

[jade]

Hi there,

@Pbalazs89

Is there a way to force it to display only full words and have the ellipsis after that based on the available length?

Unfortunately this is not possible with CSS as the ellipsis would be displayed at the edge of the container of the text if the text is longer than it’s container. For example:

As what you can see, you have currently set a 22% right margin to the recent post title and the text will only have it’s fixed width. Also, word-wrap: break-word's purpose is for allowing long words to break and wrap into the text line and the recent post title is only displaying on one line.

An option you could try is to have the recent post title display the entire title. You can do this by using this code:

.x-recent-posts .h-recent-posts {
    overflow: visible;
    white-space: normal;
    margin-right: 0;
    margin-top: 0;
}

Hope this helps.