How to wrap long lines without spaces in HTML?

前端未结

关注

 14  1819

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:

HA

相关标签:

14条回答

不知归路

2020-12-01 03:57

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.

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.

0 讨论(0)

攒了一身酷

2020-12-01 03:59

There is no "perfect" HTML/CSS solution.

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?

A: You can't.

You can read break-word

EDIT

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

or

How to prevent long words from breaking my div?

0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2020-12-01 04:01
Here's what I do in ASP.NET:
1. Split the text field on spaces to get all the words
2. Iterate the words looking for words that are longer than a certain amount
3. Insert every x characters (e.g. every 25 characters.)
I looked at other CSS based ways of doing this, but didn't find anything that worked cross-browser.
0 讨论(0)
发布评论:

提交评论
- 加载中...
北荒

2020-12-01 04:03
I haven't personally used it, but Hyphenator looks promising.

Also see related (possibly duplicate) questions:
- word wrap in css / js
- Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
0 讨论(0)
发布评论:

提交评论
- 加载中...
滥情空心

2020-12-01 04:05

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.

Wrap long lines using CSS and JavaScript

0 讨论(0)
发布评论:

提交评论
- 加载中...

粉色の甜心

2020-12-01 04:07

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)

//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);

0 讨论(0)