Как найти и окружить span первую букву в тексте?

Тема в разделе "Веб-дизайн", создана пользователем Orbit, 1 июн 2011.

Модераторы: zek24
  1. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    По дизайну первая буква в тексте страницы должна иметь другой стиль, чем основной текст (большая и красивая).
    Естественно, хочется сделать чтобы это делалось автоматом, а не юзеру пришлось бы объяснять, что нужно первую букву всегда писать:
    Код:
    <span class="big">А</span>пельсин
    Но текст из визуального редактора, т.е. там первым не обязательно будет буква контента, а могут теги какие-то идти.
    Пришло пока в голову:
    1. очистить исходный хтмл текст от хтмл тегов
    2. взять первый символ от полученного и окружить его нужным span
    3. заменить в исходном хтмл первое вхождение найденного символа на нужную конструкцию, полученную в п.2

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

    Подскажите, пожалуйста, как можно сделать замену?
     
  2. Miraage

    Miraage Angular/Laravel

    Регистр.:
    3 июн 2008
    Сообщения:
    230
    Симпатии:
    51
    это ксс, а не пхп

    иди читай про псевдокласс :first-letter
     
    Orbit нравится это.
  3. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    большое спасибо, это как то упустил, попробую так сделать, но это не совсем все же то, т.к. это не совсем универсально.
    Хотелось бы сделать так, чтобы независимо от того в каких тегах находится текст, бралась бы первая буква (т.е. это может быть p а может и без p), тогда уже без замены не обойтись наверно.
    А если брать именно первую букву первого абзаца то решение что-то типа
    Код:
    h1+p:first-letter
    перестанут работать, если, скажем в каких то текстах что-то будет между h1 и p

    first-letter, конечно лучше решение, чем span вставлять.
     
  4. rex1963

    rex1963

    Регистр.:
    19 фев 2007
    Сообщения:
    228
    Симпатии:
    47
    HTML:
    
    .sp{
    color: #000000;
    font-family: Verdana;
    font-size: 10pt;
    } 
    
    p.sp:first-letter 
    {
    	color: #800000;
    	font-size:xx-large;
        font-weight: bold;
    	font-family:Verdana;
    }
    
    <p class="sp">Апельсин</p>
    
    Текст делится параграфами, вот первый и делай с красивой буквой
     
  5. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    это не то, опять же придется заставлять пользователя (не знающего хтмл) прописывать класс в p
     
  6. Murdok

    Murdok

    Регистр.:
    1 окт 2006
    Сообщения:
    236
    Симпатии:
    84
    сделайте для всех тегов p
    HTML:
    
    p:first-letter  {     
         color: #800000;
         font-size:xx-large;
         font-weight: bold;
         font-family:Verdana; 
    } 
    
    <p class="sp">Апельсин</p>
    
    http://htmlbook.ru/css/first-letter
     
  7. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    мне не нужно во всех, мне нужно в первом, причем не обязательно p
    (описал задачу в первом посте)
     
  8. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.036
    Симпатии:
    699
    HTML:
    <style>.content:first-letter  {     
         color: #800000;
         font-size:xx-large;
         font-weight: bold;
         font-family:Verdana; 
    } </style>
    <div class="content">
       <div>Любой текст в любых тегах</div>
         <p>Еще любой текст в параграфе</p>
       </div>
    а так?
    у тебя же наверняка основной текст страницы заключен в див
     
  9. Nei

    Nei Nosce te ipsum

    Регистр.:
    5 сен 2009
    Сообщения:
    608
    Симпатии:
    479
    Orbit, приведи пример страницы или ссылку кинь. Проще будет помочь.
     
  10. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    спасибо, но что то у меня не работает на "Любой текст в любых тегах" если так сделать.