скрыть часть текста в html с помощью css

Когда у меня есть следующий код, как скрыть текст 5000 и 5001 с помощью css?скрыть часть текста в html с помощью css

<div id="field-dishe" class="readonly_label"> 
5000&nbsp;&nbsp;&nbsp;家乡猪脚醋 或 秘制黄酒鸡 Pork Trotters in Sweetened Vinegar Or Chicken Stewed in Rice Wine<br> 
5001&nbsp;&nbsp;&nbsp;椰香冷当雞 Rendang Chicken<br> 
</div>

Редактировать: Трудно обернуть его пролетом, потому что они генерируются каркасом.

источник

2013-11-07 redcoder

Используя только CSS, без JavaScript, ни изменения HTML? –

оберните 5000 и 5001 в промежутке и добавьте отображение к этому интервалу. .readonly_label span {display: none; } –

Используя только CSS, без JavaScript и без изменения HTML, это трудно сделать это без уродливых хаков, как это одна:

#field-dishe{ 
    position: relative; 
} 
#field-dishe:before { 
    position: absolute; 
    width: 35px; 
    top:0; 
    bottom:0; 
    z-index:2; 
    background: white; 
    content:" " 
}

Demonstration

Я рекомендовал бы изменить HTML, добавив некоторый диапазон или использовать JavaScript. Вот пример с JQuery:

$('#field-dishe').html(function(_,h){ 
    return h.replace(/\d+/g,''); 
});

Demonstration

источник

2013-11-07 11:34:06

hi dystroy, я не могу фиксировать высоту, поскольку список будет отличаться каждый раз. – redcoder

@redcoder Я отредактировал с нефиксированной высотой. Но на самом деле, я не уверен, что изменение HTML или добавление некоторых JS не будет более чистым. Наличие фиксированной ширины будет болезненным, если вы измените размер шрифта или цифры. –

также, если поле менее широкое и есть разрывы строк из-за обертывания. –

не представляется возможным только с CSS

Почему бы не изменить HTML-код немного (, обернув эти части в span элементов)

<div id="field-dishe" class="readonly_label"> 
<span>5000</span>&nbsp;&nbsp;&nbsp;家乡猪脚醋 或 秘制黄酒鸡 Pork Trotters in Sweetened Vinegar Or Chicken Stewed in Rice Wine<br> 
<span>5001</span>&nbsp;&nbsp;&nbsp;椰香冷当雞 Rendang Chicken<br> 
</div>

и использовать #field-dishe span{display:none}

В будущем, если CSS3 текст-отступов проект реализован, будет в состоянии сделать

#field-dishe{ 
    text-indent:-42px each-line; 
}

Документация на http://dev.w3.org/csswg/css-text/#text-indent

источник

2013-11-07 11:38:50

Вы не можете использовать дисплей: нет, чтобы скрыть весь div? – John

@john, OP специально спрашивает, как скрыть текст 5000 и 5001 внутри элемента .. не весь элемент .. –

скрыть часть текста в html с помощью css

ответ

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