Question

我在HTML / CSS页面上创建了以下标题栏：

  <div class="topmenubar" style="position:relative;background:maroon;height:40px;">
    <div id="menupadding" style="position:relative;left:30px;right:30px;">
      <table style="width:100%;">
        <tr>
          <font class="headerfont">
            <td>BeccasMap.com</td>
            <td style="text-align:right;position:relative;right:60px;white-space:nowrap;overflow:hidden;">Best upcoming Tech events in NYC</td>
          </font>
        </tr>
      </table>
    </div>
  </div>

我希望在窗口调整小的时候，“纽约市即将举行的最佳科技活动”文本消失，但我不知道该如何做到这一点。我在how to hide too long texts in div elements?中尝试了这个建议，但这对我不起作用。非常感谢你的帮助。

Answer 1

请检查：http://jsfiddle.net/eKgG8/5/

@media only screen and (max-width : 400px){
    .limit{
        display:none;
    }
}

Answer 2

如果窗口宽度小于500像素，您可以使用媒体查询完全隐藏文本：

@media screen and (max-width: 500px)  {
  .hideIfSmall {
    width:0;
    font-size:0;
  }

}

<div class="topmenubar" style="position:relative;background:maroon;line-height:40px;">
    <div id="menupadding" style="padding:0 30px;">
      <table style="width:100%;">
        <tr>
          <font class="headerfont">
            <td>BeccasMap.com</td>
            <td class="hideIfSmall">Best upcoming Tech events in NYC</td>
          </font>
        </tr>
      </table>
    </div>
  </div>

使用CSS使文本在溢出时消失

2 个答案: