如何用HTML包装没有空格的长行?

If a user types in a long line without any spaces or white space, it will break formating by going wider than the current element. Something like:

如果用户在长行中没有任何空格或空格，那么它将通过比当前元素更宽的方式来进行格式化。喜欢的东西:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA.............................................................................................................................................

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA .............................................................................................................................................

I've tried just using wordwrap() in PHP, but the problem with that is if there is a link or some other valid HTML, it breaks.

我在PHP中尝试过使用wordwrap()，但问题是如果有一个链接或其他有效的HTML，它就会中断。

There seems to be a few options in CSS, but none of them work in all browsers. See word-wrap in IE.

CSS中似乎有一些选项，但是没有一个可以在所有浏览器中使用。在IE看到自动换行。

How do you solve this problem?

你如何解决这个问题?

14 个解决方案

#1

I haven't personally used it, but Hyphenator looks promising.

我还没有亲自用过，但连字符号看起来很有前途。

Also see related (possibly duplicate) questions:

也可以看到相关的(可能重复的)问题:

word wrap in css / js
用css / js进行单词包装
Who has solved the long-word-breaks-my-div problem? (hint: not *)
谁解决了“我-div”这个长篇大论的问题?(提示:不是*)

#2

120

in CSS3:

CSS3:

word-wrap:break-word

#3

I was trying to solve the same problem and I found de solution here:

我试着解决同样的问题我在这里找到了解

http://perishablepress.com/press/2010/06/01/wrapping-content/

Solution: adding to the container the following CSS properties

解决方案:向容器添加以下CSS属性

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

The idea is using them all so you get better cross-browser compatibility

我们的想法是使用它们，这样你就可以获得更好的跨浏览器兼容性

Hope this helps

希望这有助于

#4

I like to use the overflow: auto CSS property/value pairing. This will render the parent object the way you'd expect it to appear. If the text within the parent is too wide, scrollbars appear within the object itself. This will keep the structure the way you want it to look and provide the viewer with the ability to scroll over to see more.

我喜欢使用溢出:自动CSS属性/值匹配。这将按预期的方式呈现父对象。如果父类中的文本太宽，则滚动条会出现在对象本身中。这将使结构保持您希望的样子，并为查看器提供滚动查看更多信息的能力。

Edit: the nice thing about overflow: auto compared to overflow: scroll is that with auto, the scrollbars will only appear when overflowing content exists. With scroll, the scrollbars are always visible.

编辑:关于溢出的好处:与溢出相比，自动:滚动是有自动的，滚动条只会在溢出内容存在时出现。使用滚动条，滚动条总是可见的。

#5

I'm surprised that nobody has mentioned one of my favorite solutions to this problem, the <wbr> (optional line-break) tag. It's fairly well-supported in browsers and essentially tells the browser that it can insert a line-break if it's necessary. There's also the related zero-width space character,  with the same meaning.

我很惊讶没有人提到我最喜欢的解决方案之一，(可选断行)标签。它在浏览器中得到了很好的支持，并且本质上告诉浏览器，如果需要的话，可以插入换行符。还有相关的零宽度空间字符具有相同的含义。

For the use case mentioned, displaying user comments on a web page, I would assume that there is already some output formatting to prevent injection attacks, etc. So it's simple to add these <wbr> tags every N characters in words that are too long, or in links.

对于上面提到的在web页面上显示用户评论的用例，我假设已经有一些输出格式来防止注入攻击，等等。

This is especially useful when you need control over the format of the output, which CSS doesn't always let you do.

当您需要控制输出的格式时，这一点特别有用，CSS并不总是允许您这样做。

#6

I would put the post in a div that would have a fixed width setting overflow to scroll (or to hide completely depending on the content).

我将文章放在一个div中，这个div将有一个固定的宽度设置溢出来滚动(或者根据内容完全隐藏)。

so like:

就像:

#post{
    width: 500px;
    overflow: scroll;
}

But that's just me.

但这只是我。

EDIT: As cLFlaVA points out... it is better to use auto then scroll. I do agree with him.

编辑:正如cLFlaVA所指出的…最好使用自动滚动。我同意他的观点。

#7

There is no "perfect" HTML/CSS solution.

没有“完美”的HTML/CSS解决方案。

The solutions either hide the overflow (ie scrolling or just hidden) or expand to fit. There is no magic.

解决方案要么隐藏溢出(即滚动或只是隐藏)，要么扩展以适应。没有魔法。

Q: How can you fit a 100cm wide object into a space only 99cm wide?

问:如何将一个100cm宽的物体放入一个只有99cm宽的空间?

A: You can't.

答:你不能。

You can read break-word

你可以阅读break-word

EDIT

编辑

Please check out this solution How to apply a line wrap/continuation style and code formatting with css

请检查这个解决方案如何应用行换行/延续样式和代码格式与css

或

How to prevent long words from breaking my div?

如何防止长词破坏我的div?

#8

I dodge the problem by not having my right sidebar fixed like that :P

我没有把我的右侧边栏固定成这样来避免这个问题:P

#9

Here's what I do in ASP.NET:

以下是我在ASP.NET中的工作:

Split the text field on spaces to get all the words
在空格上分割文本字段以获取所有单词
Iterate the words looking for words that are longer than a certain amount
重复单词，寻找超过一定长度的单词
Insert every x characters (e.g. every 25 characters.)
插入每个x字符(例如每25个字符)。

I looked at other CSS based ways of doing this, but didn't find anything that worked cross-browser.

我查看了其他基于CSS的方法，但是没有发现任何跨浏览器的工作。

#10

based on Jon's suggestion the code that I created:

根据Jon的建议，我创建的代码:

public static string WrapWords(string text, int maxLength)
    {
        string[] words = text.Split(' ');
        for (int i = 0; i < words.Length; i++)
        {
            if (words[i].Length > maxLength) //long word
            {
                words[i] = words[i].Insert(maxLength, " ");
                //still long ?
                words[i]=WrapWords(words[i], maxLength);
            }
        }
        text = string.Join(" ", words);
        return (text);
    }

#11

I didn't want to add libraries to my pages just for word breaking. Then I wrote a simple function which I provide below, hope it helps people.

我不想把库添加到我的页面中，仅仅是为了断字。然后我写了一个简单的函数，希望它能帮助人们。

(It is breaking by 15 characters, and applying "& shy;" between, but you can change it easily in the code)

(它正在分解15个字符，并应用“& shy”，但在代码中您可以轻松地更改它)

//the function:
BreakLargeWords = function (str)
{
    BreakLargeWord = function (word)
    {
        var brokenWords = [];
        var wpatt = /\w{15}|\w/igm;
        while (wmatch = wpatt.exec(word))
        {
            var brokenWord = wmatch[0];
            brokenWords.push(brokenWord);
            if (brokenWord.length >= 15) brokenWords.push("&shy;");
        }
        return brokenWords.join("");
    }

    var match;
    var word = "";
    var words = [];
    var patt = /\W/igm;
    var prevPos = 0;
    while (match = patt.exec(str))
    {
        var pos = match.index;
        var len = pos - prevPos;
        word = str.substr(prevPos, len);

        if (word.length > 15) word = BreakLargeWord(word);

        words.push(word);
        words.push(match[0]);
        prevPos = pos + 1;
    }
    word = str.substr(prevPos);
    if (word.length > 15) word = BreakLargeWord(word);
    words.push(word);
    var text = words.join("");
    return text;
}

//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);

#12

Add the Zero width space () to the string and it will wrap.

将零宽度空间()添加到字符串中，它将被包装。

Here is a Javacript example:

下面是一个Javacript示例:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add &#8203; between every character to make it wrap
longWordWithOutSpace.split('').join('&#8203;');

#13

-1

I have posted a solution which uses JavaScript and a simple Regular Expression to break long word so that it can be wrapped without breaking your website layout.

我已经发布了一个解决方案，它使用JavaScript和一个简单的正则表达式来分隔长单词，这样就可以在不破坏网站布局的情况下进行包装。

Wrap long lines using CSS and JavaScript

使用CSS和JavaScript包装长线

#14

-2

I know that this is a really old problem and since I had the same problem I searched for a easy solution. As mentioned in the first post I decided to use the php-function wordwrap.

我知道这是一个非常古老的问题，因为我遇到了同样的问题，所以我寻找了一个简单的解决方案。正如在第一篇文章中提到的，我决定使用php函数的wordwrap。

See the following code example for information ;-)

有关信息，请参见以下代码示例;-)

<?php
    $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
    $v2 = wordwrap($v, 12, "<br/>", true);
?>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr height="30">
                <td colspan="3" align="center" valign="top">test</td>
            </tr>
            <tr>
                <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td>
                <td width="100">&nbsp;</td>
                <td width="100">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

Hope this helps.

希望这个有帮助。

#1