Объяснить строку для переноса в новую строку после 100 символов

Есть ли способ в CSS, что я могу заставить третий элемент в этом списке, который длиннее остальных, обернуть новую строку, если она содержит более 100 символов? так что остальная часть текста находится на следующей строке?

Я попробовал предоставить <li> меньшую ширину, но содержимое переполняется.

Я также пробовал overflow:hidden;, и это отсекает его, но остальное скрыто, а не на новой строке.

Как я могу это сделать?

Вот сценарий JS, где я пытаюсь это сделать: http://jsfiddle.net/ZC3zK/

Ответ 1

Ваша линия не нарушается естественным образом, потому что вы не имеете в ней пробелов. Вы можете использовать word-wrap, чтобы заставить разрывы, а затем добавить максимальную ширину, чтобы сказать, насколько она может быть.

CSS

li{
    max-width:200px;
    word-wrap:break-word;
}

HTML

<ul>
    <li>Hello</li>
    <li>How are you</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslat eMobileBooksOffersWalletShoppingBloggerFin ancePhotosVideosEven more »Account OptionsSign inSearch...</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEvenmore»AccountOptionsSigninSearch...</li>
</ul>

http://jsfiddle.net/daCrosby/ZC3zK/1/

Вам понадобится JavaScript, чтобы считать ровно 100 символов и сломать там строку. Здесь здесь и здесь для примеров JavaScript.

Ответ 2

Ближе всего вы можете установить максимальную ширину в ch units. Эта единица определяется как ширина цифры "0", но ее ближайшее приближение к "средней ширине символов", которое мы имеем в CSS. Это означает, что некоторые строки могут быть немного длиннее 100 символов. Поскольку ch не поддерживается повсеместно, рекомендуется использовать резервную копию, используя блок em. Как правило, для типичного английского текста средняя ширина символов 0.4em или немного больше. (Это зависит от многих вещей, включая характер текста и шрифта.)

li { max-width: 40em; max-width: 100ch; }

Это приведет к нормальному обертыванию, что означает (для текста на английском языке) нарушение в пространствах, когда это необходимо, и, возможно, после некоторых символов, таких как дефис. Если вам нужна ненормальная упаковка, вам нужно точно определить, как и реализовать ее, используя различные методы, такие как переносы или пространства с нулевой шириной. Избегайте настройки word-wrap: break-word, часто предлагаемой в качестве змеиного масла - это литровое слово brely ks word s, и оно подходит только для особых случаев.

Вы можете получить точное соответствие между единицей ch и средней шириной символов только с помощью моноширинного шрифта. Это обычно не подходит для обычного текста, только для компьютерного кода.

Обратите внимание, что 100 символов намного больше, чем длины строк, обычно рекомендуемые типографами. Оптимальная длина составляет около 60 или даже меньше (опять же, в зависимости от характера текста и шрифта, а также межстрочного интервала), а 90 следует считать максимальным.

Ответ 3

Вы можете предоставить контейнеру ширину и использовать свойство CSS3 word-wrap. Не менее 100 символов.

<ul style="width: 100px; word-wrap:break-word;">
  <li>Hello</li>
  <li>How are you</li>
  <li>SearchImagesMapsPlayYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEven more »Account OptionsSign inSearch...</li>
<ul>

Ответ 4

Пожалуйста, попробуйте этот код. Я успешно выполнил перенос слов с помощью Javascript.

var a = $('.targetDiv').text().match(/.{1,50}/g);
var b = '';
if (a != null) {
    for (var i = 0; i< a.length; i++) {
        if (a[i].toString() != null) {
            b = b + '<p>' + a[i].toString() + '</p>';
        }
    }
    $('.targetDiv').html(b);
}

Ответ 5

У меня есть еще одно решение для обертывания String.

Мой код будет обертывать String без прерывания слова.

outputString = '' + $( 'CSSSelector'). Текст() + ''