How do you guys manage long usernames breaking your design?

#1 / May 05, 2008 9:42am

Danny T.
426 posts

How do you guys circumenvent long one-worded usernames that may break designs because of their length? Is there a method through CSS to wrap a long single word over 2 lines? Or perhaps a more complicated solution you guys use through PHP and if statements that can determine the length of a word and than further using CSS classes to reduce the font size?

As it currently stands, I believe I have enough room for about usernames up to 18 character lengths, but I can’t help thinking it may be a cause of concern in those rare circumstances, so better to be prepared than to not be at all.

Cheers,
D.
#2 / May 05, 2008 1:13pm

noregt
360 posts

Would you be willing to use “overflow:hidden” as a style property or is that too brutal? I would do it like this, for those people that insist on having long names. And as you said, they are a small minority.

EDIT: this only works when you are just using one line in the div box.
#3 / May 05, 2008 3:53pm

mcneasep
21 posts

Why not use the Character Limiter plugin?
#4 / May 05, 2008 3:55pm

Brad Street
239 posts

I use Character Limiter.
#5 / May 05, 2008 10:57pm

Danny T.
426 posts

Wouldn’t that just cut off the username in display?
#6 / May 06, 2008 3:38am

Sean C. Smith
3818 posts

Wouldn’t that just cut off the username in display?

yes but only the part that is going to break the site design.

#7 / May 06, 2008 4:02am

e-man

1816 posts

Is there a method through CSS to wrap a long single word over 2 lines?

How about simply setting a width on the html tag that holds your username?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    <style type="text/css" media="screen">
    h2 {width: 125px;font-size: 14px;}    
    </style>    
</head>
<body>
<h2>Short user name</h2>
<h2>My really really really really really really really really long user name</h2>
<p></body><br />
</html>

#8 / May 06, 2008 4:26am
noregt
360 posts
1.
I just saw that the character input in the CP is restricted to 32 characters. You could set this to 18 in the cp.members.php file

find:
```
$DSP->input_text('username', '', '35', '32', 'input', '300px')
```
Change 32 to 18. This will force members to restrict their name to 18 characters. Do the same for the screen name. Beware that this is a hack, so you need to redo this every update. If you don’t want that you need to make a plugin.

2.
If you still want to show longer names in a limited space you could also use “overflow: auto;” This will create a horizontal scroll bar with longer names. The scroll bar will need extra vertical space though.
#9 / May 06, 2008 4:32am

Ingmar
29245 posts

Or you could provide for up to 32 characters in your layout, and not hack EE core files 😊

Thread

Danny T.

noregt

mcneasep

Brad Street

Danny T.

Sean C. Smith

e-man

noregt

Ingmar

Username

Password

Thread

How do you guys manage long usernames breaking your design?

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password