CSS / HTML текстовая оболочка для веб-набора

Question

Я пытаюсь добиться того же эффекта, который Facebook имеет с переносом вашего статуса, если он слишком длинный. Попробуйте установить свой статус примерно на 300 символов «А» с помощью пользовательского агента webkit. Как они это делают?

Да ... Я знаю, что вы можете использовать: перенос слов: брейк-слово

Я много гуглил, и все эти приемы работают, только если вы можете установить ширину заранее, чего я не могу. Моя ширина настраивается на 100% размера экрана, чтобы разрешить растяжение при изменении размера (альбомная).

Итак, чтобы подвести итог, как я могу добиться переноса текста без указания определенной ширины для элемента или родительского элемента, без использования JS, только в браузере с webkit?

Я мог заметить, что FB использует это свойство в родительском контейнере:

-webkit-box-sizing: content-box

Но я не смог применить это к своему делу ...

Answer 1

Я думаю, я знаю, что вы ищете,

Хитрость состоит в том, чтобы комбинировать:

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

См. Этот jsfiddle для демонстрации http://jsfiddle.net/bPsav/

Answer 2

Я бы предположил, что это сделано с использованием языка на стороне сервера, прежде чем передать его клиенту.Как правило, вы хотите избежать манипулирования контентом, когда у вас такая большая база пользователей.Существует новое свойство CSS3, которое сделает это за вас, но оно не поддерживается широко.

text-overflow:ellipsis;

Более подробную информацию можно найти через Google