导致行在100个字符后换行到新行

Question

在CSS中是否有一种方法可以导致此列表中的第3个元素(如果它延伸超过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个字符并打破那里的界限.点击此处和此处查看JavaScript示例.

Answer 2

您可以获得的最接近的是以ch单位设置最大宽度.此单位被定义为数字零"0"的宽度,但它是我们在CSS中与"平均字符宽度"最接近的近似值.这意味着某些行可能会长于100个字符.由于ch不是普遍支持,因此建议使用该em单元进行一些备份.作为一个非常粗略的经验法则,对于典型的英文文本,字符的平均宽度是0.4em或稍微多一点.(这取决于许多事情,包括文本和字体的性质.)

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

这将导致正常包装,这意味着(对于英文文本)在需要时在空格处打破,并且可能在连字符之类的某些字符之后.如果你想要异常包装,你需要使用连字符或零宽度空间等各种技术准确定义和实现它.避免设置word-wrap: break-word,通常作为蛇油提供 - 它升级ala brea ks word s,它仅适用于非常特殊的场合.

ch只有使用等宽字体,才能获得单位和字符平均宽度之间的精确对应关系.这通常不适用于普通文本,仅适用于计算机代码.

请注意,100个字符远大于印刷师通常建议的行长度.最佳长度约为60或甚至更短(同样,取决于文本和字体的性质,以及行间距),90应被视为最大长度.