Как сделать отступ в элементе

Question

Как сделать отступ в элементе

0

У меня есть текст, который я хочу отступом на определенную сумму, допустим, 20px. Однако длина текста является динамической. Если ширина текста меньше ширины экрана, но текст + 20px больше ширины экрана, я не хочу, чтобы текст переходил к следующей строке. Скорее я хотел бы уменьшить отступ.

Это те случаи, которые я хотел бы разместить:

Краткий текст:

| Lorem ipsum |

Текст <ширина экрана, но текст + 20 пикселей> ширина экрана:

| Lorem ipsum dolors amet |

Текст = ширина экрана:

| Lorem ipsum dolor sit amet |

Текст> ширина экрана:

| Lorem ipsum dolor sit amet |
| consectetuer adipiscing. |

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

CurlyMo 22 окт. 2013, в 21:35

Источник

1

Что ты на сегодня сделал? Покажите нам код.
Diodeus - James MacFarlane 22 окт. 2013, в 19:03

Теги:

html

css

3 ответа

0

Используйте CSS-запросы СМИ для установки определенных правил CSS на основе ширины пользовательского устройства. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Adam Moseley 22 окт. 2013, в 17:20

0

http://jsfiddle.net/qm92C/1/

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

$(function(){
    $("p").each(function(){
        if ($(this).width() > ($(window).width() - 20)){
            $(this).css("text-indent",0);
        };
    });
});

Единственным недостатком является то, что для проверки ширины абзацев мне пришлось изменить их на элементы уровня встроенного блока, а не на элементы уровня блока.

Joel Worsham 22 окт. 2013, в 16:47

0

Это интересное решение. Но вот в чем подвох. Я бы хотел, чтобы он мог регулировать размер экрана.
CurlyMo 22 окт. 2013, в 19:37

Ещё вопросы

Что ты на сегодня сделал? Покажите нам код.
Это интересное решение. Но вот в чем подвох. Я бы хотел, чтобы он мог регулировать размер экрана.

andi · Accepted Answer · 2013-10-22T17-21-00.000Z

Здесь решение только для CSS... работает для браузеров, поддерживающих calc.

<div class="indent">
    <span>Lorem ipsum dolor sit amet consectetuer adipiscing.</span>
</div>
.indent {background:pink;}
.indent span {float:right; min-width:calc(100% - 20px);}
.indent:after {content:""; display:table; clear:both;}

Сценарий: http://jsfiddle.net/anwPa/

Это потрясающе! Можете ли вы объяснить, почему вы включили CSS для .indent: after? Я не уверен, что делает эта линия и зачем она нужна.
поскольку диапазон внутри является плавающим, параметр: after служит в качестве прозрачного исправления, чтобы фоновый цвет заполнял элемент div. В противном случае, div не будет расширяться, чтобы содержать плавающий промежуток. Уберите его в скрипке, и вы увидите разницу.