如何在HTML中包含没有空格的长行?

时间:2008-12-12 17:03:49

标签: php html css textwrapping

如果用户键入一条没有任何空格或空格的长行,它将通过比当前元素更宽来打破格式化。类似的东西:

  

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

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

CSS中似乎有一些选项,但它们都不适用于所有浏览器。请参阅IE中的自动换行。

你如何解决这个问题?

14 个答案:

答案 0 :(得分:120)

CSS3中的

word-wrap:break-word

答案 1 :(得分:42)

我试图解决同样的问题,我在这里找到解决方案:

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

解决方案:向容器添加以下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+ */
}

这个想法是全部使用它们,以便您获得更好的跨浏览器兼容性

希望这有帮助

答案 2 :(得分:17)

我喜欢使用overflow: auto CSS属性/值配对。这将以您希望它出现的方式呈现父对象。如果父级中的文本太宽,则滚动条会出现在对象本身中。这将使结构保持您希望它的外观,并为观众提供滚动查看更多内容的功能。

编辑:与overflow: auto相比,overflow: scroll的好处是auto,只有存在溢出内容时才会显示滚动条。使用scroll,滚动条始终可见。

答案 3 :(得分:7)

我没有亲自使用它,但Hyphenator看起来很有希望。

另见相关(可能重复)的问题:

答案 4 :(得分:6)

我很惊讶没有人提到我最喜欢的解决方案之一<wbr>(可选的换行符)标签。这是相当well-supported in browsers并且基本上告诉浏览器,如果有必要,可以插入换行符。还有相关的零宽度空格字符&#8203;具有相同的含义。

对于上面提到的用例,在网页上显示用户评论,我会假设已经有一些输出格式来防止注入攻击等。所以每{{1}添加这些<wbr>标签很简单词语太长或链接中的字符。

当您需要控制输出的格式时,这尤其有用,CSS并不总是让您这样做。

答案 5 :(得分:5)

我会将帖子放在一个div中,该div会有一个固定的宽度设置溢出来滚动(或根据内容完全隐藏)。

所以喜欢:

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

但那只是我。

编辑:由于 cLFlaVA 指出...最好使用auto然后scroll。我同意他的意见。

答案 6 :(得分:2)

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

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

问:如何将100厘米宽的物体放入仅99厘米宽的空间?

答:你不能。

您可以阅读break-word

修改

请查看此解决方案 How to apply a line wrap/continuation style and code formatting with css

How to prevent long words from breaking my div?

答案 7 :(得分:0)

我没有像我那样固定右侧边栏来解决问题:P

答案 8 :(得分:0)

基于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);
    }

答案 9 :(得分:0)

将零宽度空间(&#8203;)添加到字符串中,它将换行。

这是一个Javacript示例:

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

答案 10 :(得分:0)

这是我在ASP.NET中所做的:

  1. 拆分空格上的文本字段以获取所有单词
  2. 迭代搜索超过一定数量的字词
  3. 插入每x个字符(例如,每25个字符。)
  4. 我查看了其他基于CSS的方法,但没有发现任何可以跨浏览器工作的东西。

答案 11 :(得分:0)

我不想为了破坏字词而将库添加到我的页面。 然后我写了一个简单的函数,我在下面提供,希望它能帮助人们。

(它突破15个字符,并在它们之间应用“&amp; 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 :(得分:-1)

我发布了一个解决方案,该解决方案使用JavaScript和一个简单的正则表达式来打破长字,以便在不破坏网站布局的情况下进行包装。

Wrap long lines using CSS and JavaScript

答案 13 :(得分:-2)

我知道这是一个非常古老的问题,因为我遇到了同样的问题,所以我搜索了一个简单的解决方案。 正如第一篇文章中提到的,我决定使用php-function wordwrap。

有关信息,请参阅以下代码示例; - )

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

希望这有帮助。

豫ICP备18024241号-1