Сдвиг каждой строки

milax · December 4, 2008

Здравствуйте.

Можно ли как-то реализовать вот такую штуку...

Каждая следующая строка текста сдивагается на определенное количество пикселей.

Например:

вввввввввввв
 вввввввввввв
  вввввввввввв
   вввввввввввв
    вввввв

Очень интересная задача, и мне интересно, можно ли такое реализвать с помощью CSS?

Victor Ananiev · December 4, 2008

<div style="margin-left:10px;">Hello<div style="margin-left:inherit;">Hello<div style="margin-left:inherit;">Hello</div></div></div>

Если я не ошибаюсь на счет значения inherit, то должно работать... INHERIT должен задавать такое же значение как и у родителя, кароче если не выйдет, то принцып ты понял...))

http://dbaron.org/css/test/inherit

SelenIT · December 4, 2008

Можно и без inherit-а, типа

#ladder div { margin-left: 10px; }

<div id="ladder">Hello<div>Hello<div>Hello</div></div></div>

Но, по-моему, семантически неправильно это — городить матрешку-небоскреб ради одной лишь лесенки отступа. Если количество строк ограничено разумным пределом, я бы скорее сделал так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Это, кстати, валидная страница :)</title>
<style type="text/css">
p { margin: 0; }
p + p { margin-left: 10px; }
p + p + p { margin-left: 20px; }
p + p + p + p { margin-left: 30px; }
p + p + p + p + p { margin-left: 40px; }
</style>
<p>красота</p><p>важна,</p><p>но семантика</p><p>гораздо</p><p>важнее</p>

Правда, для IE6, как обычно, понадобятся костыли...

milax · December 5, 2008

Так это было бы слишком просто

Длина текста неизвестна изначально. Плюс, ко всему прочему, он должен быть выравнен по правому краю, т.е. по одной линии.

s0rr0w · December 5, 2008

Так это было бы слишком просто
Длина текста неизвестна изначально. Плюс, ко всему прочему, он должен быть выравнен по правому краю, т.е. по одной линии.

Сделать картинкой.

milax · December 5, 2008

Сделать картинкой.

Что сделать картинкой?

s0rr0w · December 5, 2008

Что сделать картинкой?

Сгенерировать по заданному алгоритму и вставить вместо текста.

milax · December 5, 2008

Сгенерировать по заданному алгоритму и вставить вместо текста.

s0rr0w · December 5, 2008

Есть более идиотский путь. Разбить текст на слова. Слова обрамить в <span></span>

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

Но самый главный вопрос, а нафига это надо?

Whatsup · December 6, 2008

Можно просто самому задавать пробелы.Делается просто

я в основном так разметку текста делаю.

Предоставляю следующие услуги:

-Веб-дизайн: создание и разработка сайтов, дизайн и оформление
-Создание логотипов
-Разработка фирменного стиля

rus · December 6, 2008

Можно просто самому задавать пробелы.Делается просто
я в основном так разметку текста делаю.

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

Victor Ananiev · December 6, 2008

не понял чем вам не нравится мой способ, все выводится через цикл, а стили везде одинаковые, имхо, в вашем случае самый полезный)

Whatsup · December 8, 2008

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

Объясни пожалуйста почему.Только не на таком языке(моветон)

Я не очень понимаюего.

А вообще подойдут вложенные списки с стилями.Список в списке.Код станет побольше чем просто текст с маргинами но будет удобнее верстать

Vlad · December 8, 2008

Моветон - дурной вкус означает, добавь в свой словарь, хорошее слово.

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

Whatsup · December 8, 2008

Возьмем на вооружение.Просто иногда бывают тексты которые поставил и забыл.Они вечные.Так для таких текстов я их и использую

Sign In

Сдвиг каждой строки

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information