31

CSS 中有没有办法让这个列表中的第 3 个元素（它比其他元素长）在超过 100 个字符时换行到新行？这样其余的文本就在下一行？

我试着给它<li>一个较小的宽度，但内容溢出了。

我也尝试过overflow:hidden;并且将其切断，但其余部分被隐藏而不是新行。

我怎样才能做到这一点？

这是一个 JS Fiddle，我正在尝试这样做：http: //jsfiddle.net/ZC3zK/

4

8 回答 8

55

您的线路不会自然中断，因为您没有任何空格。您可以使用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 示例。

于 2013-05-25T23:08:48.983 回答
20

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

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

这将导致正常换行，这意味着（对于英文文本）在需要时会在空格处中断，并且可能在一些字符（如连字符）之后中断。如果您也想要异常换行，您需要准确定义如何使用各种技术（如连字符或零宽度空格）来实现它。避免设置word-wrap: break-word，通常以蛇油的形式提供——它确实会破坏单词，并且仅适用于非常特殊的场合。

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

请注意，100 个字符远大于排版人员通常推荐的行长。最佳长度约为 60 甚至更少（同样，取决于文本和字体的性质以及行间距），应将 90 视为最大长度。

于 2013-05-26T05:59:17.613 回答
1

这对我来说效果很好：

在您希望换行的位置使用标签，然后防止空格换行。

.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>

于 2019-05-30T10:16:13.013 回答
0

您可以给容器一个宽度并使用 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>
于 2013-05-25T22:55:27.893 回答
0

应用 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;
}
于 2021-05-10T17:49:10.363 回答
0

我还有另一种包装字符串的解决方案。

我的代码将在不破坏单词的情况下包装字符串。

outputString=''+$('cssSelector').text()+''

于 2016-12-24T19:19:35.423 回答
-1

请尝试此代码。我已经使用 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);
}
于 2016-12-24T19:14:17.957 回答
-3

如果你正在使用 excel，你可以使用这个：

A1是单元格文本

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

文本在 100 个字符后结束

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

文本在 100 之后开始和结束以结束。

于 2020-06-05T11:06:44.987 回答