I run into a situation often where I have several short descriptions in a restaurant menu. The short descriptions each fit easily in the column width. A few entries require a 2nd line usually listing options e.g., “with chicken, shrimp or beef.”
Naturally, I want the line spacing to be tighter when there is a two line entry so it separates as one distinct entry from the one above or below. I can wrap each entry in <p>'s or <li>'s and use <br>'s for those few 2-line entries, then add some top-margin to the <p>'s or <li>'s to achieve the affect.
What I want to do is wrap the whole thing in one <p> and insert <br>'s where needed and somehow control the line height after the <br>. This would make the coding much cleaner and easier to build - any idea how to do this?
I may have explained that poorly. I am interested in changing the HTML… but as I started to type out the way i would prefer to do it, I realized that the separate entries require block level tags to define them as separate entries.
Pardon the inquiry - I think I got a bit too close to the forest to see the trees. Ryan, thanks for trying to make sense of my half-baked idea.
With your current markup it’d be nearly impossible to have a universal setting that would work in all instances (besides manually setting a value to each element)
With the element containing the entries you can just set the line-height of it and even if it goes onto 2 lines (you ultimately have little control over that) you can still have a margin set to space it out from the other content.
Couldn’t you just do that? Unless I’m missing something lol
I think you might be missing something in this problem. Here’s some sample code:
<p>Fresh Odwalla juices<br />
Orange, grapefruit, tangerine (seasonal)<br />
small 2.00 large 2.50</p>
<p>Fresh Gizdich apple juice</p>
<p>Martinellis apple juice (filtered)</p>
<p>Odwalla Honey Lemonade</p>
<p>Tomato juice</p>
<p>Cranberry juice</p>
<p>small 1.50 large 2.00</p>
You see that Odwalla juices is folowed by a list of juices and then pricing for small and large. Those 3 lines should be tighter than the general line-height between <p> entries. It’s done here by setting a line-height and a top-margin for <p>. The top margin doesn’t affect the wrapped text so those lines are tighter. I would like to wrap the whole block in one <p> tag and then control the breakline tags so that they keep the juice lines together. See sample image attached.
I may not be able to simplify this coding - but worth investigating.