Code to make long names get 3 dots (ellipsis)

By default, long friend names in your friends section, well... they wrap. And you might have noticed that when they wrap, your layout can get messed up! rrgg... you can fix this with an ellipsis.

Copy and paste the code below and your friends section will look neat and organized. You can see it in action if you want on my profile.

For a detailed explanation of how the code works, read at the bottom of this blog.

The code

.profile .friends .person {
   width:100px;
}

.profile .friends .person a:first-child p {
   width:100px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

How it works

First you need to set the width of the container. 100px works well.
Next, you need to select the paragraph element friends names are put in. .profile .friends .person a:first-child p
By setting the white-space property to nowrap, text will flow only horizontally and never wrap.
This can look ugly at times and text will flow over stuff, so you want to set the overflow property to hidden. This is why we set a width on the container and paragraph, so that overflow will get clipped (masked).
Lastly, we set the text-overflow to ellipsis. This means that when text flows beyond its container, instead an ellipsis (3 dots) is used and the text is clipped.

0 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

Jeff Madden

1612167225

P.S. You may have to adjust the width for your layout. Just raise or lower the number slowly until your friends organize neatly.

Report Comment

...or minimize margins/padding

by Jeff Madden; 1612176651; Report