Jump to content

"Shortening" a line of text cretively...


Rothgarr
 Share

Recommended Posts

(I did a search for anything similar and could find anything... so...)Is there a way to truncate a line of text, and include "..." in its place? For example, lets say I've got automated breadcrumb navigation that looks like:Home > Top Level Page > Second Level Page > Third Level Page > Fourth Level Pageand let's say it's too long and blows up the page and I don't want it to wrap to two lines. Is there any way after a certain width to make it look like:Home > Top Level Page > Second Level Page > Third Level Page > Fourth ...Notice how it's a little shorter and it has "..." at the end.I tried using all kinds of nested divs, widths, background images for the "..." whitespace, overflow, etc. But I'm only able to get the line of text to be chopped off at a certain point. I can't figure out how to get the "..." to appear once the line of text has reached that point where it gets chopped off... Is there any way to accomplish this in a scenario where I'll have no idea how long that string of text will ever be (since it's auto-generated)? Is there any way to accomplish this in a way that's fully cross-browser compatible?

Link to comment
Share on other sites

By using php.There is a way of using php to determine how long the sentance is, and then after a certain number of characters it cuts off or puts in the '...'I cant remember off hand the code or where i found out the code, but i do know its possible.:)

Link to comment
Share on other sites

By using php.There is a way of using php to determine how long the sentance is, and then after a certain number of characters it cuts off or puts in the '...'I cant remember off hand the code or where i found out the code, but i do know its possible.:)
Got it. I guess I'll have to enlist one of the programmers then.I was hoping to find a solution using Width and Overflow Hidden that I could easily recycle for other projects...
Link to comment
Share on other sites

Well, you could do

<div style="float:left; width:500px; overflow:hidden; ">Home > Top Level Page > Second Level Page > Third Level Page > Fourth Level Page</div><div style="float:left; ">...</div><br />

But that would cut it off mid-character if your line was, say, 504px.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...