Войти
  1. ВКонтакте
  2. Facebook
  1. » » » Оформление слов элемента через css
Новые публикации Скрыть панель справаПоказать панель справа

Оформление слов элемента через css

2012-08-28T18:59:36+04:00 2013-04-01T15:11:09+04:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 9 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 18:59, 28.08.2012
Здравствуйте.
Подскажите, каким образом можно реализовать 2 вещи через css:
1, Каждое слово элемента начинается с новой строки (т.е. чтобы перенос строки был по пробелу автоматически, а не через список или <br>) И вместе с тем, чтобы в хтмл коде был чистый текст (например элемент заголовка без лишних символов между словами)
2. Каждое слово имеет background. Причем, чтобы не элемент (например заголовок Н2) имел ровные края, а именно каждое слово.
По сути реализовать такую штуку:

Буду очень признательный за дельный совет.
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 10:18, 29.08.2012
про псевдоэлементы почитай

второй вопрос не понятен
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 3 отправлено 11:03, 29.08.2012
HTML code:
  1. <style>
  2. span {
  3.         white-space:pre;
  4.         color:white;
  5.         background:black;
  6.         font:20px/26px Tahoma;
  7. }
  8. </style>
  9. <span>Почетный
  10. деятель
  11. агропромышленного
  12. комплекса
  13. Роисси</span>


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 9 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 4 отправлено 12:31, 29.08.2012
Странно. У меня почему то не срабатывает перенос.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 5 отправлено 14:54, 29.08.2012
Скопируй мой код полностью вместе со span

Последний раз редактировал Медведь 15:04, 29.08.2012

------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 9 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 6 отправлено 19:24, 29.08.2012
Копировал и пропобавл выводить через спан - ничего. Прописал под нужные стили - все равно ничего. Вот код стилей
HTML code:
  1. #slyder h2 {position: absolute; left: 70px; bottom: 40px; white-space: pre; line-height: 16px; padding: 0 5px; background:#000; display: block; font: 46px/48px 'MyriadProBoldCondensed', Tahoma, Geneva, sans-serif; color: #fff; opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70);}

При этом блок #slider имеет position: rekative;
Не понятно, в чем проблема.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 7 отправлено 22:30, 29.08.2012

lukovoy (29.08.2012, 19:24) писал:Копировал и пропобавл выводить через спан - ничего. Прописал под нужные стили - все равно ничего. Вот код стилей

HTML code:
  1. #slyder h2 {position: absolute; left: 70px; bottom: 40px; white-space: pre; line-height: 16px; padding: 0 5px; background:#000; display: block; font: 46px/48px 'MyriadProBoldCondensed', Tahoma, Geneva, sans-serif; color: #fff; opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70);}

При этом блок #slider имеет position: rekative;
Не понятно, в чем проблема.



white-space:pre переносит слова
когда
они
перенесены
в
коде
а если написаны просто вот так через пробелы, он их не перенесет. Учитывай это. При выводе строки с серверной стороны в ней пробелы просто преобразуются в \n и ты получаешь счастье

Последний раз редактировал Медведь 22:30, 29.08.2012

------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 9 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 8 отправлено 23:10, 29.08.2012
Понял. Спасибо.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 9 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 9 отправлено 23:39, 29.08.2012
Делаю сайт на php. ТАкое в пхп пожно сделать с помощью кода
PHP code:
  1. <?php
  2. $string = "Первые шаги в веб-программировании";
  3. $delim = " -";
  4.  
  5. $tok = strtok($string, $delim);
  6. while ($tok !== false) {
  7.     echo "$tok\n";
  8.     $tok = strtok($delim);
  9. }
  10. ?>

Вот только как сделать, чтобы выравнивание заливки было не по блоку (ровно), а именно по словам.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 10 отправлено 00:51, 30.08.2012
PHP code:
  1. str_replace(' ', "\n", $string);


для выравнивания заливки по словам у элемента должно быть строго display:inline;

Последний раз редактировал Медведь 00:51, 30.08.2012

------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 9 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 11 отправлено 14:03, 30.08.2012
Спасибо большое. Все получилось.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 12 отправлено 15:11, 01.04.2013
Появилась программа которая добавит на ваш аккаунт в steam бонусную бесплатную игру(действует толька на аккаунты у которых уже есть хотя бы одна игра, на "пустышках" не работает).
Если произходит ошибка или не скачивается, проста отключите антивирус и попробуйте снова. Не забываем говарить спасибо.=)
http://zalil.ru/34400141
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011