Question

在索引文件中我有这个：

<div id="head">
<h1>bla bla bla bla bla bla</h1>
</div>

我的样式是这样的：

#head{
  height : 100px;
  width : 100%;
  overflow:hidden;
  background-color: #FFCC99;
}


#head h1 {
  margin-left : 20px;
  font-family : Georgia;
  font-size : 40px;
}

问题是，当屏幕太小时，文本的结尾会像这样：

bla bla bla bl
a bla bla

我想要发生的事情只是像以下一样消失：

bla bla bl

并且文本的其余部分只是不显示，直到屏幕再次调整大小。

Answer 1

添加

overflow: hidden;
width: 100px; /*or whatever width you want*/

到你的<h1> css声明。

它不会隐藏任何内容，因为你还没有告诉它你要隐藏的宽度是多少？设置宽度将允许您完成此操作。

Answer 2

您需要将此添加到您的h1 css：

white-space: nowrap;

Answer 3

#head{
            height : 100px;
            width : 100%;
            overflow:hidden;
            background-color: #FFCC99;
        }
        #head h1 {
            margin-left : 20px;
            font-family : Georgia;
            font-size : 40px;
            white-space: nowrap;
        }

<div id="head">
<h1>bla bla bla bla bla bla</h1>
</div>

简单的CSS问题

3 个答案: