использование CSS для исчезновения текста при переполнении

Question

использование CSS для исчезновения текста при переполнении

0

Я создал следующую строку заголовка на странице 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>

Я бы хотел, чтобы текст "Лучшие предстоящие технические события в Нью-Йорке" исчезли, когда размер окна изменился незначительно, но я не уверен, как это сделать. Я попробовал предложение о том, как скрывать слишком длинные тексты в div-элементах? и это не работает для меня. Большое спасибо за Вашу помощь.

La-comadreja 01 дек. 2013, в 15:57

Источник

0

Какова позиция: относительная; слева: 30px; справа: 30px;
Tom Chung 01 дек. 2013, в 14:35
1

создание левого и правого полей по 30 пикселей на строке текста. Эта часть работает.
La-comadreja 01 дек. 2013, в 14:38

Теги:

html

css

css3

responsive-design

2 ответа

Ещё вопросы

Какова позиция: относительная; слева: 30px; справа: 30px;
создание левого и правого полей по 30 пикселей на строке текста. Эта часть работает.

Tom Chung · Answer 1 · 2013-12-01T13-17-00.000Z

Проверьте это: http://jsfiddle.net/eKgG8/5/

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

G-Cyr · Answer 2 · 2013-12-01T13-15-00.000Z

Вы можете использовать медиа-запросы, чтобы полностью скрыть текст, если ширина окна меньше 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>