Обтекание текста CSS/HTML для webkit

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

Да... я знаю, что вы можете использовать: word-wrap: break-word

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

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

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

-webkit-box-sizing: content-box

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


iphone html css word-wrap webkit
person Assaf Moldavsky    schedule 23.02.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

text-overflow:ellipsis;

Дополнительную информацию можно найти через Google

person Seth    schedule 23.02.2011
comment
многоточие будет работать, только если это одна строка (без переноса), но им каким-то образом удалось обойти это. Я почти уверен, что это делается для размера клиента, потому что, когда вы изменяете размер окна, текст обтекается прямо здесь... - person Assaf Moldavsky; 23.02.2011
comment
Я имею в виду, что реальная проблема заключается в том, как установить ширину родительского элемента без использования ширины: XYZ в вашем CSS. Может быть, есть какое-то новое свойство webkit, которое мы можем использовать? - person Assaf Moldavsky; 23.02.2011
comment
Если это так, это можно сделать с помощью JavaScript, где они будут следить за относительной шириной вдовы и соответствующим образом корректировать текст. Они делают какие-то сумасшедшие вещи в фейсбуке. Я хотел бы сидеть с ними в течение нескольких дней и учиться. - person Seth; 23.02.2011

arrow_upward
0
arrow_downward

Кажется, я знаю, что ты ищешь,

Хитрость заключается в сочетании:

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

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

person Andrew Plummer    schedule 21.05.2013