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个字符并打破那里的界限。查看here和here以获取JavaScript示例。

Answer 2

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

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

这将导致正常换行，这意味着（对于英文文本）在需要时在空格处断开，并且可能在连字符之类的某些字符之后断开。如果你也想要异常包装，你需要使用various techniques如连字符或零宽度空格来确切地定义和实现它。避免设置word-wrap: break-word，通常作为蛇油提供 - 它升级为单词，它仅适用于非常特殊的场合。

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

请注意，100个字符比印刷师通常推荐的线长要大得多。最佳长度约为60甚至更短（同样，取决于文本和字体的性质以及行间距），90应被视为最大长度。

Answer 3

您可以为容器指定宽度并使用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 4

请尝试此代码。我已经使用Javascript成功实现了自动换行。

File

Answer 5

我还有一个包裹String的解决方案。

我的代码将包装String而不会破坏单词。

outputString = '' + $（ 'cssSelector'）。文本（）+ ''

Answer 6

对我来说效果很好：

在要换行的位置使用标签，然后防止换行。

.h2_wrap
{
   white-space: nowrap;
  font-size: 18px;
}

<h2 class="h2_wrap">Pretty long sentence that looks<wbr> better when cut at one specific spot</h2>

Answer 7

如果您使用的是excel，则可以使用以下方法：

A1是单元格文本

=IF(LEN(A1)<100;A1;MID(A1;1;100))

文字在100个字符后结束

=IF(LEN(A1)<100;A1;MID(A1;100;LEN(A1)-1))

文本从100开始一直到结束。

Answer 8

应用 CSS 'overflow-wrap' 和 'max-width' 指示浏览器打破最大宽度之外的单词，CSS 下方帮助我实现了相同的目标。

break-description-text {
  width: 30% !important;
  max-width: 25em !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

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

8 个答案: