html - 如何将 CSS 设置应用于特定的 HTML 元素

Question

HTML：

        <div class="tagline">Web Portal Name</div><br />
        <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;">

      <span> Welcome <?php echo $_SESSION['userName'] ?> </span>
       | <a href="login.php"><span> Sign Out</a> </span> </div>

在我的网络模板中，我显示登录的用户名，后跟欢迎信息。

问题：当我的用户名很长（大约 30 个字符）时，我的下一个链接（退出链接）被移动到右侧。

如何避免将此退出链接移到右侧。我知道它可能有简单的答案，但无法弄清楚。

注意：我尝试更改margin-left 设置，但它破坏了我的对齐方式。

更新： 无论用户名长度如何，我可以保持注销链接的位置固定吗？

Answer 1

试试这个：

span{
text-overflow: ellipsis;
max-width:xx px;
overflow:hidden;
display:inline-block;
}

Answer 2

为长名称设置最大宽度，并用省略号表示：

<span class="username"> Welcome <?php echo $_SESSION['userName'] ?> </span>

CSS

.username  {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: x px; /* set this to what you need */
}

Answer 3

#logged_in_user_dtls span {
   width: 200px; /* adjust that to your needs*/
   display: inline-block;
   overflow: hidden;
}

这将使名称的较长部分被削减。overflow:hidden;如果你想避免这种情况，你可以删除。