Скрыть определенный текст, используя только CSS?

Вот копия кода я имею в виду:Скрыть определенный текст, используя только CSS?

<div id="incomeforecast"> 
    <div style="float:left;margin:10px 0 10px 0;width:100%;text-align:center;"> 
     <span class="textred"><b>USD Currency</b></span><br> 
      Monthly: $0.00 USD (0)<br> 
      Quarterly: $0.00 USD (0)<br> 
      Semi-Annually: $0.00 USD (0)<br> 
      Annually: $0.00 USD (0)<br> 
      Biennially: $0.00 USD (0)<br> 
      Triennially: $0.00 USD (0)<br> 
     <span class="textgreen"><b>Est. Annual: $0.00 USD</b></span> 
    </div> 
</div>

Мне нужно, чтобы скрыть это от отображения на странице:

  Biennially: $0.00 USD (0)<br> 
      Triennially: $0.00 USD (0)<br>

Есть ли способ сделать это только с помощью CSS? Файл PHP, выводящий его, зашифрован, и на странице нет файлов Javascript, поэтому можно использовать только CSS ...

источник

2015-06-04 Jamie

Приложите это в DIV и добавить свойство 'дисплей: none' – Deadlock

"Файл PHP выводит его шифруется" – Jamie

Используя только CSS .... Нету. Вы «владеете» файлом php или это сторонний участник? Если вы владеете им, вы должны иметь возможность расшифровать его. Сложным вариантом было бы вызвать начальную страницу PHP с новой страницей PHP, а затем проанализировать содержимое, чтобы удалить то, что вы хотите. –

Я достиг этого по-другому, используя положение относительное и asbolute. Посмотрите на мой код. Но вы уверены в правильном размере и высоте текста.

#incomeforecast div{position:relative;} 
#incomeforecast div span:last-child 
{ 
    height:35px; 
    margin-top:-30px; 
    display:block; 
    background-color:#fff; 
    position:absolute; 
    bottom:0px; 
    left:0; 
    right:0; 
}

DEMO

источник

2015-06-04 05:42:59

Это даже умно, чем у меня, +1 за ваш ответ. –

Yup есть способ. Вы можете увидеть ниже:

body { 
 
    font:14px/1.7 Arial; 
 
    color:#444; 
 
} 
 

 
.txts { 
 
    border:1px solid #ccc; 
 
    padding:10px; 
 
    height:130px; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 

 
.txts .textgreen { 
 
    position:absolute; 
 
    left:10px; 
 
    bottom:0; 
 
    background:#fff; 
 
    height:20px; 
 
    padding-bottom:5px; 
 
}

<div id="incomeforecast"> 
 
    <div class="txts"> 
 
     <span class="textred"><b>USD Currency</b></span><br> 
 
      Monthly: $0.00 USD (0)<br> 
 
      Quarterly: $0.00 USD (0)<br> 
 
      Semi-Annually: $0.00 USD (0)<br> 
 
      Annually: $0.00 USD (0)<br> 
 
      Biennially: $0.00 USD (0)<br> 
 
      Triennially: $0.00 USD (0)<br> 
 
     <span class="textgreen"><b>Est. Annual: $0.00 USD</b></span> 
 
    </div> 
 
</div>

Идея, вы делаете высоту контейнера коробки текста ограничена, чтобы показать только до линии, которую вы хотели, чтобы быть видимыми. Затем добавьте overflow:hidden;

Теперь сложной частью было показать последнюю строку. К счастью, у вас есть тег, поэтому мы можем использовать для этого положение. position:absolute к этому элементу - потяните его на дно. Добавьте белый фон, чтобы текст под ним не был виден.

Bingo !!!

источник

2015-06-04 05:39:06

Не могли бы вы включить код в самом ответе или лучше использовать фрагмент кода. Кнопка <>. Эквивалент StackOverflow для jsfiddle –

Done @JonP, спасибо за поощрение. –

Скрыть определенный текст, используя только CSS?

ответ

Смежные вопросы