0

Возможно сделать тоже самое визуально, но более элегантно в плане кода? Отобразить текст (абзац) с помощью CSS: http://cssdesk.com/gumNB

4
  • А что не так с уже имеющимся кодом? Чем он вам не нравится?
    – fori1ton
    26 мая 2013 в 14:25
  • Обратите внимание, что в моем коде ссылки в UL списке. Мне нужно записать в таком же виде (визуально) абзац текста используя тег p. Как на этом сайте примерно: saforian.com , но они оборачивают каждую строку в span + br. Я ищу более изящное решение. 30 мая 2013 в 14:25
  • То есть, в одном теге p должны быть все ссылки (разделяться пробелом), но чтобы выглядело так, как в твоем примере? Или что? Не понимаю задачу. Приведи что ли разметку, какой она должна получиться.
    – Bars
    30 мая 2013 в 14:56
  • Попробую пояснить. Есть абзац фиксированной ширины, скажем 300px: <p>"Скоро ли? Скоро ли? О, эти несносные улицы, лавки, калачи, фонари, извозчики!"</p> Мне нужно чтобы он визуально выглядел как в моем примере. Можно сделать тоже самое с помощью тегов span и br, например так: cssdesk.com/4SNKN Я ищу максимально красивое и универсальное решение данного вопроса. В идеале без дополнительных тегов, подстраивающееся под любую ширину абзаца. 1 июн 2013 в 10:12

2 ответа 2

1

Можно. С помощью псевдоэлементов :bebore и :after.

Но это не добавит элегантности Вашему коду, а скорее наоборот ...

Для разметки используйте html, а для стилизации css.

0

Можно вот так:

<div class="text-frame">
  <span>Скоро ли? Скоро ли? О, эти несносные улицы, лавки, калачи, фонари, извозчики!</span>
</div>

<style>
.text-frame {
  max-width: 150px;
}
.text-frame > span {
  font-size: 15px;
  line-height: 25px;
  background: #fff;
  border: #fff 5px solid;
  outline: #fff 5px solid;
  border-style: solid none;
}
</style>

На мой взгляд, это изврат.

2
  • Изврат суть вопроса или решение? Думаю пока красивее получается здесь cssdesk.com/4SNKN, как у этих ребят saforian.com . Если вы насчет сути - визуальное представление подобного вида попадается достаточно часто если не в вебе, то в современном глянце, поэтому хочется найти perfect-решение, чтобы не плодить говноверстку. 1 июн 2013 в 12:23
  • Я имею в виду решение: я о ненормальном применении border и outline. C другой стороны, можно еще заменить на box-shadow. Но с задачей справляется, верно? В разметке нет жестких переносов, текст переносится автоматом.
    – Bars
    2 июн 2013 в 23:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.