Stupid css tricks: line breaks in lists

Periodically I encounter some problem with html and css layouts that could be solved by adding a few extra presentational tags to the html source (like <br/> or text bullets in the case I'm about to describe), but there's no easy way to do it in CSS.  I almost always end up caving and doing it that way, but I like flailing around and trying new things first before giving up.  I feel like sharing the most recent example because I'm almost proud of it, and in some circumstances it might actually be the right thing to do.

What I have is a list of links for a blog.  This is an excellent candidate for an unordered list, except that I want them presented like so:

one - two - three

four - five - six

seven - eight

The trick here is getting the dashes so they show up only in the middle of each line.  But there's no easy way to tell where the natural line breaks are, so I cant just have the first <li> per line not have a dash in front of it.  That means I'm probably going to need to insert some line breaks so I know which ones are at the beginning of a line, but I'd still rather not do it in the html.

I ended up with this:

.blogroll { text-align: center; }
.blogroll li { display: inline; padding: 0 6px; }
.blogroll li + li:before { content: '-'; position: relative; left: -8px; }
.blogroll li:nth-child(3n+1):before { content: '\a'; position: static; white-space: pre; }

The first two lines just make the elements centered, inline, and separated a bit. The third line puts a dash before all<li> elements that come after another <li> element--effectively everything but the very first in the list.  The fourth one is the magic: it uses a new css selector nth-child to select the element after every third element (that's the "3n+1" bit) and replaces the dash with a newline character (that's the "\a" bit).  Normally newline characters are just converted to spaces, but setting the white-space to "pre" makes the line actually wrap there.

It almost works!  Unfortunately, there is a case it doesn't handle well.  If one of the items is too long, the lines will wrap before the third item and you end up with this:

one - two - three

four - reallyreallylong

- six

seven - eight

Oh well.  I guess I'll be putting those line breaks in by hand after all.  But if you don't have to worry about that, it might actually be a good technique!



I am working on site in wordpress, where all the Jobs are pulled from the external jobs sites, such as monster, indeed, simplyhired. jobs are getting published on site randomly. but I need to explode the jobs titles after specific ascii character ” – ” for ex Sales and Marketing Manager – Mortons Steakhouse – San Francisco, CA and extract last jobs Address from the title and call it in location column.

Can somebody give me php function or any other way that should work automatically for this. the ” – ” is common for all jobs titles published on site.



Does the php explode() function do what you want? (

explode(“ – “, yourstring);


Pam thanks for reply

Actually I am not good at PHP coding, I have tried the explode function, and I have echoed explode function where I have to show the country address from the title.

But the jobs titles differs as there are many jobs on the site. How can I automatically get the only address/location extract from job title using explode and display it in location column, this should work for all the jobs on the site.

there is column for job title, job location and job date.

job title refer this - “VP Venture Banker – New York, New York, United States”

error getting on site after using explode.

Array ( [0] => VP Venture Banker � New York, New York, United States ) Array

can you give me full php function for this and how to call that on the location.

please help here….

thanks again

It looks like function is not finding the character you are telling it to split by. Try again with a space and see what it looks like–you should see something like Array([0]=>VP [1]=>Venture …..etc. It’s probably actually a unicode emdash. If strpos(yourstring, “-“) gives you false instead of a number you are looking for the wrong character.

It sounds a lot like you’re trying to create a site that screen scrapes a lot of other sites. I’d like to advise against that. Sites tend to get cranky about that, and for good reason. You are stealing the content that they have put time and money into accumulating (even if other people contribute it, they had to build the site and build up the brand to attract those users in the first place), and you are stealing their bandwidth without giving anything back by routinely crawling their site. If you go this route, make sure you have something unique to offer besides just repackaging content form other sites, and make sure you have a backup plan for when they send you a cease and desist letter.


hello, thanks for reply

actually this is just a demo site on localhost I am just trying the related jobs for demo and not on the live site. I was not able to break the unicode character and was finding it difficult to break.

I have tried the unicode character but its not recognizing the “-“ character. I think I need to make it manual task.




I have showing a list of members on word press site in a page. when I click on the page it shows all the members and also a search. now when I click on any user in that list it shoes author=1 same like other author=2, author=3. Now I have integrated a comment template in this users. when I comments on this profile the page redirect to the post from that user.

can I show each users as page so as the comments will work for that particular user. means when the author is click from the list it show automatically as page and this should work for all the users, can this be happen. I need some urgent help on this

or, Is there any way to add a comment section in author.php page which having users profiles. this should allow other users to comments on user profiles.

please help to solve this issue.

Thank you

I have never tried to do that. Have you tried asking on the Wordpress support forums? I think you’ll get more help there than you will on a blog post about css.


I need to hide the category name “featured” from home page. I tried doing all the way its not having any effects. its a custom post type category and its a global default category on site. It also has many featured posts from other category. and I cannot delete it from site, cause it will delete all the post.

The category has a ID shown in admin. I tried hiding it from the id but no use, when I hover the category on home page its shows “job_cat=featured”.

Is there any way that I can just hide it from the sidebar rather than deleting.

please help…



I need to make a seperate comments table in wordpress DB that will handle comments for author profiles. wordpress comments works for post and page. I need comments for user profile.

the new comment file will handle users profile comments and stored in seperate custom comment table.

please can help me how to get this done, as I dont know much php. Can you show me the custom comment structure and seperate pHp file.


I’m pretty sure the get_categories function has a way to exclude categories by id. I highly recommend reading the section on the get_categories function in the wordpress manual on The book Digging Into Wordpress might also be a good resource for you.

I have not tried to do anything with comments on author pages before, and I don’t have time to write your code for you, I’m sorry. You will probably have better luck in the Wordpress forums. You might also look into Buddy Press and its extensions, they may already have the feature you need.



does buddypress extension support wordpress site. BP have group review plugin that I can use on the wordpress, but when I install it does not appear on site.

can you tell me how to get BP plugin work on wordpress.



I am working on the wordpress site using job roller theme when I search for in the search bar for any key words i get huge results for the keywords, i have set the page showing 15 post to display per page but the pagination in the bottom is not showing in the bottom. I dont know how its coming, I am using wp pagenavi plugin.

when I click on the other category having many posts it shows pagination in the bottom, only pagination for the search page is not showing.

can you please tell me how to fix this….

waiting….for reply.



Thanks so much for this! I was trying to do a similar thing, but my LIs were floated, so it wasn’t working correctly. Changing them to display:inline did the trick!

Glad to help!