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个字符）时，我的下一个链接（退出链接）会移到右侧。

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

注意：我试图改变marigin-left设置，但它破坏了我的路线。

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

Answer 1

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

<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 2

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

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

Answer 3

试试这个：

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

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

3 个答案:

CSS