How to wrap long lines without spaces in HTML?

2019-01-08 11:58发布

站内问答 / PHP
2050 14 4

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

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.

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

How do you solve this problem?

14条回答
Viruses.
2楼-- · 2019-01-08 12:24

in CSS3: 

word-wrap:break-word
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-01-08 12:24

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) 举报
仙女界的扛把子
4楼-- · 2019-01-08 12:25

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

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

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-01-08 12:27

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, &#8203; 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.

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

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
6楼-- · 2019-01-08 12:27

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) 举报
不美不萌又怎样
7楼-- · 2019-01-08 12:28

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.

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)