CSS: Text-line-icon. Set the line to auto-increase width depends on text length?

Question

I'm trying to do this:

enter image description here

into html so when I type some text the line gets longer or shorter. On the end of each line there is a small icon of height of 32px so I would image each line would be line-height:32px.

Shall I use <li> or div's and sort the icon next to the line next to the text with float:left? And how would the line increase it self? I would imagine the line would have a background-color and a height of 1px?

I'm not new to CSS, I'm just trying to think of the simplest way of doing this. Note that each line is a button which expands.

Thanks alot

Edit:

It will actually look something like this: enter image description here

Each div is a toggle button and I would like the grey line to be in the middle of the entire div if that makes sense.

Thanks alot again

tried something like this? http://stackoverflow.com/questions/5476673/css-justify-text-fill-space-with-dots — Joseph Marikle, Aug 10 '11 at 23:15

pixelfreak · Accepted Answer · 2011-08-10T23:25:45.077

1

Simplest way I can think of is to use border-bottom on the text container, then push the text out with negative bottom.

Quite simple really, here you go: http://jsfiddle.net/pixelfreak/DCZSa/

edited Aug 10 '11 at 23:25

answered Aug 10 '11 at 23:17

pixelfreak

17,714
12
90
109

Thanks. I think there is a better way to show you what I'm aiming for which will make it easier for you to think of an alternative way. The
I believe it is not a solution since I haven't got many options. One minute I'm updating my question with a new image.

jQuerybeast

Aug 10 '11 at 23:29

@jQuerybeast Updated jsfiddle with icons. The

is really not a requirement. You can use whatever tag you like

– pixelfreak Aug 10 '11 at 23:33

score 0 · Answer 2 · answered Aug 10 '11 at 23:22

0

If your background is solid, I would probably implement this like so:

http://jsfiddle.net/JLwwP/

First, use an all-white background (or whatever color). Then, on your list items, tile your horizontal line. Then, float the image (with a white background) to the right. Finally, wrap your left-hand text in a span and make it's background the same solid.

It's not perfect (it requires some fiddling with node heights to make everything work), but you can see the effect.

answered Aug 10 '11 at 23:22

OverZealous

39,252
15
98
100

How would I make the li { background-color: #F0F0FF; a line of 1px height? They way you've did it, doesn't allow me to change the height of the line and have it in the middle. – jQuerybeast Aug 10 '11 at 23:26
Don't use the background-color on the LI - use a repeating background image. – OverZealous Aug 10 '11 at 23:29
I see what you mean. That was my first thought actually. I asked this question for that reason, on how to prevent images. Thanks alot sir – jQuerybeast Aug 10 '11 at 23:40

CSS: Text-line-icon. Set the line to auto-increase width depends on text length?

2 Answers2