Another CSS Challange!

[exsite_interactive]

Okay so i am trying to get a white highlight box behind text, however i am having some issues finding a way to achieve the desired result. I have laid everything out on a staging page:

http://exsite.ca/temp/highlight.htm

Image #1: This is an actual JPG of the desired result.

Image #2: This is using a P tag with some styling on it. When the text in the tag only spans one line, it displays perfectly – just like the desired result. The issue is when the text drops to 2 or more lines.

Image #3: This is also using a P tag, however when the text breaks to 2 lines the highlight automatically spans the entire width of the container.

Image #4: This is to try to combat the issue with #3. The text is put in a span instead of a P tag. The result here is not ideal for 2 reasons. First of all, the lines are highlighted individually which causes a gap in between lines (can be fixed with line-height). But more importantly, the span only puts the padding left of the left side of the first line, and the padding-right on the right sise of the last line. Which leaves no padding on the end of the first line/beginning of the second line.

Confusing enough? That link should pretty much explain everything.

Any solution would be appreciated.

[noahgelman]

Ah…. this one is a toughy. I’ve run into this a couple times. I’ve had to use multiple inline p tags or something of the like to do it before. If there was a way to do it with one element I would like to know.

[joshuanhibbert]

I have taken a slightly different approach; using lettering.js to wrap each character in a span so that it doesn’t matter where the line breaks, it just works. Here is an example: http://jsfiddle.net/joshnh/NM7SZ/

The downside is you have to use jQuery, the upside is that you can just write everything as you normally would, no having to work out where lines break and so on (which is impossible in a fluid environment anyway).

[exsite_interactive]

@joshuanhibbert, that is almost perfect! the only issue is that some of the letters are getting cut off on the right side, almost like the span is not wide enough… maybe because it is an embedded web font that is italicized?

[joshuanhibbert]

@exsite_interactive I would say that is exactly what the issue is, and I’m not sure that there is much you can do about that.

[Paulie_D]

Would this help? https://css-tricks.com/text-blocks-over-image/

[Fakebook]

@joshuanhibbert nice solution! This is a great question too, I wondered this for a bit, and tried various solutions.

[exsite_interactive]

@Paulie_D – I took a look at the link you posted, and i thought it would do the trick. However it uses the
tag and in my case i need to have it so that the line breaks fall naturally without having to manually insert a
tag. :( seems like there still is no perfect solution to this.

[joshuanhibbert]

@Exsite_interactive Just a thought, as my solution is pretty close, try increasing the horizontal padding on the span selector, or try using the CSS property letter-spacing (on the p selector).

[exsite_interactive]

letter spacing and padding do the trick, but then the type is spaced out more than we want it to be, which isn’t really ideal. I even tried setting a letter spacing of 1px and a padding-right of -1px, or -0.5px , but these also don’t work as -1 gets you back to where we started and -0.5px does not work because it seems like only whole numbers do work.

display:block does not work. It stacks the letters vertically.

[Author]

Posts