1

I am using php to output and exerpt inside a p tag.

I am then wrapping the inside string of the p tag with a span.

<p class="lead"><span><?php the_advanced_excerpt(); ?></span></p>

The outputted html...

<p class="lead"><span>Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular…</span></p>

The span then has this css on it...

.carousel-caption .lead span {
    background: #F60;
    padding: 5px;
}

Please see the out come here...

enter image description here


See the green arrows - where it looks as desired.
See the red arrows - where padding is missing.

As you can see the orange high lighted lines are flush at the end of each line. Apart from the beginning and the end of the string.

So my question is how can I add left/right padding to each of the lines?

So it appears that each line has been highlighted with a background colour. Like plastic tape that you get embossed letters on.

Is this posible somehow?

Joshc
  • 3,825
  • 16
  • 79
  • 121
  • Please post the rendered HTML, not the PHP source. – j08691 May 08 '13 at 16:02
  • The padding shows up on jsfiddle: http://jsfiddle.net/DnFJP/ – Ryan Saxe May 08 '13 at 16:03
  • Why not have the background color on your .carousel-caption, that way the background is always orange? unless I am missing something. – Cam May 08 '13 at 16:06
  • @RyanSaxe on single lines it works fine, on multiple lines, the edges are flush, apart from the first and last words on the paragraph. See here http://jsfiddle.net/DnFJP/1/ – Joshc May 08 '13 at 16:08
  • @Cam please see my images above - have highlight the problems – Joshc May 08 '13 at 16:16
  • unfortunately since it really all is one line and just breaking lines because of space, I don't think you can do what you want. See my answer for more detail on why – Ryan Saxe May 08 '13 at 16:18
  • you can add padding to the paragraph and make the text left aligned? should have the same effect – Amitd May 08 '13 at 16:20
  • @Amitd tried that - does not work http://jsfiddle.net/DnFJP/2/ – Joshc May 08 '13 at 16:23
  • This may help a little http://stackoverflow.com/a/4148445/258674 – dev-null-dweller May 08 '13 at 16:23
  • @dev-null-dweller thanks I found this - but perhaps maybe is seems for trouble that it's work - I will see if I can figure it out, but looks difficult. – Joshc May 08 '13 at 16:25
  • Only way I was able to do this is by explicitly defining each line break and each line as its own
    with padding and line-height. Perhaps you could use PHP to set a word limit per line and generate a new
    once that limit has been reached? Here's an example: www.laudeomedia.com - you have to add a display:inline style to each div. Otherwise the red background color will exceed the width of the text.
     – Freddie May 09 '13 at 20:10

2 Answers2

0

Add "display: block" or "display:inline-block" to span's class

Eugene
  • 1,899
  • 1
  • 13
  • 10
0

Unfortunately I do not think it is possible, and this is why:

span is always inline like this, so padding adds an extra 5px on the top, bottom, left, and right. Now your middle lines are not the beginning or the end because they are one line, so padding does not read for them.

You can set a background with display:block but you want a "highlighted" effect, which is not what display:block will give

Ryan Saxe
  • 17,123
  • 23
  • 80
  • 128
  • Hmmmm is there not any sneaky of adding spans to each line using jquery or something? – Joshc May 08 '13 at 16:18
  • unfortunately I do not believe so. I considered it, but the line-break points are subjective to the size and such and it is only for styling so I am pretty sure you cannot determine it. There is one thing, but it's not a good idea...use jquery or php to calculate about how many characters before a theoretical line-break and add a space, but that has potential to go wrong – Ryan Saxe May 08 '13 at 16:22
  • Thanks for your help ryan - seems for trouble than its worth :( – Joshc May 08 '13 at 16:26