Question

我在引导程序中使用h2标记进行标题。我有一些结构

<div id="id2">
  <header>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header very long </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

当我调整窗口大小然后我的h2标签显示不正确它只是下来并显示在另一个部分时，它发生了很麻烦。

我想做的是当h2没有足够的空间时，它应该只显示空间中有多少个字符。类似我的标题......

下面是我对h2的css

#id2 > header h2 {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    height: 100%;
    letter-spacing: 0;
    line-height: 34px;
    margin: 0;
    position: relative;
    width: auto;
}

它似乎不起作用..如果任何CSS专家可以分享一些信息。

谢谢

Regrads，莫纳

Answer 1

为了实现这一目标，您必须做一些事情。您的标头必须设置为display: block而不是display: inline-block，然后您需要在标头和overflow: hidden上设置text-overflow: ellipsis。

这是一个示例jsfiddle

编辑：添加了更好的jsfiddle链接

Answer 2

text-overflow:ellipsis;

如果文本不适合元素，

将为您执行此操作。但是，默认情况下，h2会拉伸以适合文本，所以你也应该设置一个最大宽度，这样你的h2就不会变得太宽。

Answer 3

我想你需要删除

"display: inline-block;"

调整大小时的html标记宽度

3 个答案: