2015-07-31 4 views
2

Edit:Сделать первую букву-этикетки прописные

Казалось бы, бесполезная попытка, как там, кажется, не быть способ сделать первую букву в верхнем регистре, если есть псевдо-элемент в путь, и, к сожалению, псевдоэлемент не может быть перемещен или удален, как хотелось бы, как это было предложено ниже. В любом случае, спасибо вам за помощь.


Я приложил пример кода, чтобы сделать вещи немного проще.

Мне интересно, правильно ли я делаю это, или если это бесполезная попытка. Надеюсь, что JavaScript не нужен для чего-то такого простого.

Благодарим вас за понимание!

label span:before { 
 
    display: inline-block; 
 
    content: " "; 
 
    width: 10px; height: 10px; 
 
    margin-right: 10px; 
 
    border: 1px solid #333; 
 
} 
 

 
label { 
 
    text-transform: lowercase; 
 
} 
 

 
label::first-letter { 
 
    text-transform: uppercase; 
 
}
<label> 
 
    <span> 
 
    TESTING 
 
    </span> 
 
</label>

+0

убедитесь, что все метки тегов будут заглавные, если вы хотите, чтобы конкретные тогда применяли вложенные классы и родительские отношения с тегами. –

+0

Является ли текст означающим «Верхняя часть кода»? –

ответ

1

Попробуйте это, он должен работать для вас.

label { 
    text-transform: capitalize; 
} 
+0

Это не работает, если текст является полным (как в коде OP). Кроме того, это могло бы использовать несколько слов, которые точно не соответствуют требованиям OP – Phil

+1

А также, он оставляет 'TESTING' как' TESTING' –

+0

, в этом случае css не поможет, я думаю, поскольку вы хотите, чтобы полное предложение было заглавным. Следующий URL-адрес поможет, я уверен. http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript –

4

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

jsfiddle: http://jsfiddle.net/afg3eegs/1/

label { 
 
    display: inline-block; 
 
    text-transform: lowercase; 
 
} 
 

 
label::first-letter { 
 
    text-transform: uppercase; 
 
}
<label> 
 
    <span> 
 
     TESTING 
 
    </span> 
 
</label>

Надеется, что это помогает.

+0

@ не помните ничего плохого в JSFiddle.Это намного более гибкий, чем SO snippets – Phil

+0

@Phil Для меня это неправильно. Мне не нравится нажимать на ссылки, а для возраста JSFiddle - возраста. – idmean

+0

не знал о исполняемых фрагментах, добавленных только сейчас. спасибо – link

2

В данном случае для того, чтобы сделать первую букву <span> элемента в верхнем регистре, вы должны переместить ::before псевдо-элемент в <label> и использовать ::first-letter псевдо-элемент на <span> вместо:

label:before { 
 
    display: inline-block; 
 
    content: " "; 
 
    width: 10px; height: 10px; 
 
    margin-right: 10px; 
 
    border: 1px solid #333; 
 
} 
 

 
label, label span { 
 
    text-transform: lowercase; 
 
    display: inline-block; 
 
} 
 

 
label span::first-letter { 
 
    text-transform: uppercase; 
 
}
<label> 
 
    <span> 
 
    TESTING 
 
    </span> 
 
</label>

Обратите внимание, что ::first-letter псевдо-элемент не применяется на незамещаемые элементы уровня инлайн.

+0

Спасибо Мими, однако, псевдоэлемент генерируется вне моего собственного контроля – adamj

-1

Если текст «ИСПЫТАНИЕ» уже находится в капитале, вы не сможете его использовать с помощью CSS, насколько я знаю. вам следует попробовать сделать это с помощью javascript. или вы можете попробовать использовать дисплей: свойство встроенного блока, как указано выше.

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