html - 長い文字列が div の配置/形成を混乱させる

Question

ユーザーのリストがあります。そして現在、長い名前を持つユーザーは、配置/フォーメーションをいじっています.

名前にサイズを設定することでうまくいくと思いました：

.invitee .name{
  height: 50px;
  width: 115px;
  text-align: center;
}

...そうではありません。

私が言いたいことを示すためにフィドルを作りました。

どうすれば修正できますか？

Answer 1

招待されたクラスにはインライン ブロック css があります。デフォルトでインライン要素として機能する要素は、中央に垂直に配置されます。次を追加できます。

.invitee {vertical-align:top}  

その後、高さを削除できます。

http://jsfiddle.net/B92LW/23/

PD: inline-block は IE7 のような古いブラウザーでは機能しません。このハックを追加してみてください：

.invitee {
  display:inline-block; *display:inline; *zoom:1
}

Answer 2

このようなものを試してくださいhttp://jsfiddle.net/enve/B92LW/9/

まず、の高さを定義し、.inviteeに追加position: absoluteします.name

Answer 3

オーバーフローを使用できます： overflow:hidden;

これにより、そのサイズより大きいものはすべて非表示になります。

Answer 4

これを追加：

white-space: nowrap;