Question

我遇到overflow:hidden;似乎不起作用的问题。

我试图使得包含在div中的几个内联元素通过overflow: hidden;以20像素切断

标记：

<div class="container">
    <span>Hello World 1</span>
    <span>Hello World 2</span>
    <span>Hello World 3</span>
</div>

CSS：

.container {
    width: 20px;
    overflow: hidden;
}

小提琴：http://jsfiddle.net/7XHPC/

代码显示Hello World内联元素环绕容器，而不是通过overflow: hidden;

切断

任何建议都将不胜感激。感谢。

Answer 1

将其添加到.container

white-space:nowrap;

演示： http://jsfiddle.net/robcabrera/x6VSL/1/

Answer 2

我想你希望每个单词都在另一个之下，所以我建议：

<强> CSS

.container {
  max-width:20px;
  overflow: hidden;
  display:table-cell;
}

div > span{
    white-space: nowrap;
}

fiddle

Answer 3

你也可以通过两个包装div实现这个目的

<强> HTML

<div class="outer-container"> 
    <div class="container">
        <span>Hello World 1</span>
        <span>Hello World 2</span>
        <span>Hello World 3</span>
    </div>
</div>

<强> CSS

.outer-container {
    width: 20px;
    overflow: hidden;
}
.container {
    width: 100px;
}

JSFiddle

Answer 4

您需要为span标记设置宽度，并使它们显示为块。

.container {
    width: 20px;
    overflow: hidden;
}
.container span {
    width:200px;
    display:block;
}

Answer 5

您需要添加一个高度。否则，高度会自动调整以适应内容。

CSS：

 .container {
     width: 20px;
     overflow: hidden;
     height: 50px;
 }

溢出隐藏似乎不起作用

5 个答案: