Предотвращение переполнения текста вложенным контейнером в HTML

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

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

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

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

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

Ответ 1

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

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

Ответ 2

Вы пытались:

word-wrap:break-word;

он автоматически разбивает слово на следующую строку, когда конец достигнут.

Ответ 3

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

Пример

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

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

b) После реализации многоточия

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

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

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