У меня такая ситуация:
<div style="width: 100px; padding: 5px 15px 5px">Some text longer than 100px</div>
Если я устанавливаю переполнение: скрытый в div, текст по-прежнему будет выходить за пределы 15px области справа:
++----------------------------+------+
++----------------------------+------+
||This text should stop here -| but i|
++----------------------------+------+
++----------------------------+------+
Можно ли это сделать, не помещая дополнительный элемент внутри для хранения текста. Любое решение в любом браузере будет делать, я просто хочу знать, возможно ли это.
Вы можете использовать прозрачную рамку, чтобы сделать желаемый марж. Он не будет переполнен:
div {
white-space: nowrap;
overflow: hidden;
max-width: 300px;
border-left:1em solid transparent;
border-right:1em solid transparent;
text-overflow: ellipsis;
}
Вы пытались:
word-wrap:break-word;
он автоматически разбивает слово на следующую строку, когда конец достигнут.
Эй, я точно не знаю о ваших требованиях, есть один способ усечения текста с использованием свойства эллипсиса css3.
Пример
a) Нормальный случай
+-------------------------++
some text which is exceeding the container
+-------------------------++
b) После реализации многоточия
+-------------------------++
some text which is exceed...
+-------------------------++
Вот ссылка: https://developer.mozilla.org/En/CSS/Text-overflow, которые также имеют информацию о поддержке браузера.
Надеюсь, это поможет!