Question

在移动设备和桌面设备上使用导航栏的样式时，如果导航栏中所有项目的总宽度超过了宽度，我一直试图隐藏其中一个项目（页面标题）的溢出。窗口。例如，如果导航栏的总宽度为400px，并且视口宽度为350px，则除标题之外的所有项目都保持其设置宽度，并隐藏标题的溢出。有问题的项目位于列表中间，如下所示：

<html>
  <div class="navbar">
        <ul>
            <li id="linkHome"><a href="/home">Home</a></li>
            <li id="pageName"><span>Title</span></li>
            <li id="logOut"><a href="/logout">LOGOUT</a></li>
        </ul>
    </div>
</html>

我用来设计样式的当前CSS是：

.navbar ul {
    white-space: nowrap;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.navbar li {
    float: left;
}

.navbar li a {
    width: auto;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li span {
    max-width: 35px;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    overflow: hidden;;
}

另一件事，我更不希望使用JavaScript，所以如果只有一个CSS解决方案，那将是更受欢迎的！

Answer 1

你可以使用css @media，这是一个例子

@media (max-width:767px){
  .class-name {
     width: 50% !important;
  }
}

max-width是此css应用的最大屏幕宽度，您可以按最小宽度更改max-width并根据需要调整其值。

Answer 2

使用媒体查询@media all and (max-width: 500px){ //css goes here}

如果总宽度超过窗口，如何隐藏特定对象的溢出（仅CSS？）

2 个答案: