Предотвратить переполнение текста в контейнере с отступами в HTML

Question

У меня такая ситуация:

<div style="width: 100px; padding: 5px 15px 5px">Some text longer than 100px</div>

Если я установлю переполнение: скрытый в div текст будет по-прежнему выходить за пределы области в 15 пикселей справа:

++----------------------------+------+
++----------------------------+------+
||This text should stop here -| but i|
++----------------------------+------+
++----------------------------+------+

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

Answer 1

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

div {
    white-space: nowrap;
    overflow: hidden;
    max-width: 300px;
    border-left:1em solid transparent;
    border-right:1em solid transparent;
    text-overflow: ellipsis;
}

Answer 2

вы пробовали:

word-wrap:break-word;

автоматически переводит слово в следующую строку при достижении конца.

Answer 3

Эй, я не знаю точно о вашем требовании, есть один способ обрезать текст с помощью свойства css3 ellipsis.

Пример

а) Нормальный случай

+-------------------------++
some text which is exceeding the container
+-------------------------++

б) После внедрения многоточия

+-------------------------++
some text which is exceed...
+-------------------------++

Вот ссылка: https://developer.mozilla.org/En/CSS/Text-overflow, в которой также есть информация о поддержке браузера.

Надеюсь, это поможет!