Перетворення тексту CSS з великої літери на всіх шапки

Ось мій HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

Ось мій CSS:

.link {text-transform: capitalize;}

Вихід:

Small Caps & ALL CAPS

і я хочу, щоб результат був:

Small Caps & All Caps

Будь-які ідеї?

Неможливо зробити це з CSS, ви можете використовувати PHP або Javascript для цього.

Приклад PHP:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

Приклад jQuery (це плагін зараз!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​

Ви майже можете це зробити за допомогою:

.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }

Це дасть вам вихід:

Small caps
All caps

Конвертувати за допомогою JavaScript, .toLowerCase()і capitalizeвсе інше.

Цікаве запитання!

capitalizeперетворює кожну першу букву слова в велику, а інші букви не перетворює на малі. Навіть :first-letterпсевдоклас не скоротить його (тому що це стосується першої літери кожного елемента, а не кожного слова), і я не можу побачити спосіб комбінування малих літер та великої літери, щоб отримати бажаний результат.

Наскільки я бачу, це справді неможливо зробити з CSS.

@Harmen показує гарний PHP та вирішення jQuery у своїй відповіді.

Я хотів би запропонувати чисте рішення CSS, яке є більш корисним, ніж представлене рішення з першої літери, але також дуже схоже.

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

Хоча це обмежено першим рядком, воно може бути корисним для більшої кількості випадків використання, ніж рішення першої літери, оскільки воно застосовує великі літери до всього рядка, а не лише до першого слова. (усі слова в першому рядку) У конкретному випадку ОП це могло б вирішити.

Примітки: Як зазначалося в коментарі до рішення першого листа , важливий порядок правил CSS! Також зверніть увагу , що я змінив <a>тег для <div>тега , тому що з якоїсь - то причини псевдо-елемент ::first-lineне працює з <a>тегами спочатку , але як <div>і <p>всі в порядку. EDIT:<a> елемент буде працювати , якщо display: inline-block;це додається до .linkкласу. Дякуємо Дейву Ленду, що помітили це!

Нова примітка: якщо текст, який завершується, він втратить великі літери, тому що він фактично знаходиться на другому рядку (перший рядок все ще в порядку).

JavaScript:

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

CSS:

.link { text-transform: capitalize; }

Те, що Хан "закінчив робити" (що чистіше і працювало для мене), йдеться в коментарях до посту, позначеного як відповідь.

captializeвпливає лише на першу букву слова. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Може бути корисним для java та jstl.

1. Ініціалізувати змінну з локалізованим повідомленням.
2. Після цього можна використовувати його у jstl функції toLowerCase.
3. Перетворення за допомогою CSS.

У JSP

1.

<fmt:message key="some.key" var="item"/>

2.

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

У CSS

3.

.content {
  text-transform:capitalize;
}

Ви можете зробити це з першої літери css! наприклад, я хотів його для меню:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

Він працює лише з елементами блоку - отже, вбудований блок!

Якщо дані надходять із бази даних, як у моєму випадку, ви можете їх опустити, перш ніж надсилати їх до списку вибору / випадаючого списку. Соромно, що ти не можеш це зробити в CSS.

Дослідивши багато, я знайшов функцію / вираз jquery, щоб змінити текст першої літери лише великими літерами, я відповідно змінив цей код, щоб зробити його корисним для поля введення. Коли ви напишете щось у полі введення, а потім перейдете до іншого файлу чи елемента, текст цього поля зміниться лише з великої літери першої літери. Неважливо, що вводить текст користувача у повному регістрі з нижнього чи верхнього регістру:

Дотримуйтесь цього коду:

Крок 1. Виклик бібліотеки jquery в голові html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Крок 2: Введіть код, щоб змінити текст полів введення:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

Крок 3: Створіть поля введення HTML з тим самим ідентифікатором, який ви використовуєте в коді jquery, наприклад:

<input type="text" id="edit-submitted-first-name" name="field name">

Ідентифікатор цього поля введення: редагувати-подати-ім’я (Використовується в коді jquery на кроці-2)

** Результат: Переконайтеся, що текст зміниться після переміщення фокусу з цього поля введення на інший елемент. Тому що ми використовуємо фокус-подію jquery тут. Результат повинен бути таким: Тип користувача: "спасибі", він зміниться на "Дякую". **

Удачі

Рішення PHP, в бекенд:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

Я знаю, що це пізня відповідь, але якщо ви хочете порівняти продуктивність різних рішень, у мене є jsPerf, який я створив.

Рішення Regex напевно найшвидші.

Ось jsPerf: https://jsperf.com/capitalize-jwaz

Є 2 рішення для регулярного генерування.

Перший використовує /\b[a-z]/g. Межа слів призведе до великих слів, таких як нерозголошення до нерозголошення.

Якщо ви хочете використовувати лише великі літери, яким передує пробіл, використовуйте другий регулярний вираз

/(^[a-z]|\s[a-z])/g

якщо ви використовуєте jQuery; це один із способів зробити це:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Ось простіша для читання версія, що робить те саме:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Демо

все неправильно він існує -> шрифт-варіант: small-caps;

перетворення тексту: з великої літери; просто перша буква