2016-05-24 3 views
1

Например строчной нанимателя CSS, строки, как это, что лежит внутри HTML элемента:можно отобразить первый символ в верхнем регистре, а остальные в только

- One Tree 
    - one tree 
    - One tree 
    - one Tree 

После применения стиля они должны быть оказаны as:

One tree 

PD: Только с использованием CSS, без javascript и дополнительной обработки.

+1

Внутри одного элемента или одного элемента для каждой строки? –

+0

Невозможно, только с CSS, я бы сказал ... – sinisake

+0

Вы могли бы предположить, что это один элемент для каждой строки – Victor

ответ

5

Да, вполне возможно.

Смотрите этот код, например:

li, 
 
p{ 
 
text-transform: lowercase; 
 
} 
 
li::first-letter, 
 
p::first-letter{ 
 
    text-transform: uppercase; 
 
}
<ul> 
 
<li>first Li Item</li> 
 
<li>SeCOND li Item</li> 
 
</ul> 
 
<p> 
 
First PitEm is herE. 
 
</p>

Пример здесь: https://jsfiddle.net/s23xr3km/

+0

, я просто добираюсь до этого решения !, это приятное обходное решение. Единственным недостатком является то, что работает только для элементов блочного уровня, поскольку селектор :: first-letter может использоваться только с элементами уровня блока. – Victor

+0

покажите свой код, может быть, мы сможем что-то придумать :) –

+0

спасибо Nabeel, я думаю, это сложнее объяснить этим знаменем ... на данный момент этот ответ может работать! – Victor

1

Вам нужно создать два диапазона ID первого поверочного идентификатор должен иметь CSS, как это

#spanId1 { 
text-transform : capitalize; 
} 
#spanId2 { 
text-transform :lowercase; 
} 
<span id = "spanId1"> One </span> <span id = "spanId2"> Tree </span> 
Смежные вопросы