Question

我有一个

<ul>
    <li>
        <div class="title">
           <span>Title</span>
           <div class="button">
               <div class="flyout"></div>
           </div>
        </div>
    </li>
</ul>

我正在使用以下css

.title {
    display: block;
}

.title span{
   display: inline-block;   
}
.button{
   display: inline-block;
}

这是列表条目的标题，其中包含.flyout菜单的按钮。我希望.title - div在一行中包含<span>和<div>。目前它分为两行。由于.flyout我无法使用overflow: hidden。还有其他方法可以达到这个目的吗？

Answer 1

如果我理解正确，您可以使用white-space:nowrap，这样文字就不会换行到新行：

JS Fiddle

.title span{
    display: inline-block;
    white-space: nowrap;   /* add this line */
}

资源：

Answer 2

尝试此white-space: nowrap;

.title span {
    white-space: nowrap;
}

*{margin:0;}
.title {
    display: block;
}

.title span{
   display: inline-block;   
}
.button{
   display: inline-block;
}


.title span{
    white-space: nowrap;
}

<ul>
    <li>
        <div class="title">
           <span>Title dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fs</span>
           <div class="button">
               <div class="flyout">ddddd </div>
           </div>
        </div>
    </li>
</ul>

**如果您可以同时申请比单一行中使用的**

.title{
            white-space: nowrap;
        }

 *{margin:0;}
    .title {
        display: block;
    }

    .title span{
       display: inline-block;   
    }
    .button{
       display: inline-block;
    }


    .title{
        white-space: nowrap;
    }

    <ul>
        <li>
            <div class="title">
               <span>Title </span>
               <div class="button">
                   <div class="flyout">ddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fsddddd dsfsd fs</div>
               </div>
            </div>
        </li>
    </ul>

水平展开div而不溢出：隐藏

2 个答案: