Линия причины для переноса в новую строку после 100 символов

Question

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

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

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

Как это сделать?

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

Answer 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 символов и разорвать линию там. Проверьте примеры here и here.

Answer 2

Вы можете дать контейнеру ширину и использовать свойство CSS3 слово-обертывание. Не менее 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> 

Answer 3

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

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

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

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

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

Answer 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); 
} 

Answer 5

У меня есть еще одно решение для упаковки строк.

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

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