php 如何在 HTML 中包装没有空格的长行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/363425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap long lines without spaces in HTML?
提问by Chris Bartow
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.
我试过只wordwrap()在 PHP 中使用，但问题是如果有链接或其他一些有效的 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?
你怎么解决这个问题？
采纳答案by Matt Kantor
I haven't personally used it, but Hyphenatorlooks promising.
我没有亲自使用它，但Hyphenator看起来很有希望。
Also see related (possibly duplicate) questions:
另请参阅相关（可能是重复的）问题：
回答by Marcin
in CSS3:
在 CSS3 中：
word-wrap:break-word
回答by Fernando Costas - Mercadosweb
I was trying to solve the same problem and I found de solution here:
我试图解决同样的问题，我在这里找到了解决方案：
http://perishablepress.com/press/2010/06/01/wrapping-content/
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
希望这可以帮助
回答by cLFlaVA
I like to use the overflow: autoCSS 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.
我喜欢使用overflow: autoCSS 属性/值配对。这将按照您期望的方式呈现父对象。如果父级中的文本太宽，滚动条会出现在对象本身内。这将使结构保持您想要的样子，并为查看者提供滚动以查看更多内容的能力。
Edit: the nice thing about overflow: autocompared to overflow: scrollis that with auto, the scrollbars will only appear when overflowing content exists. With scroll, the scrollbars are always visible.
编辑：与overflow: auto相比的好处overflow: scroll是，auto滚动条仅在存在溢出内容时才会出现。使用scroll，滚动条始终可见。
回答by Wylie
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 browsersand essentially tells the browser that it caninsert a line-break if it's necessary. There's also the related zero-width space character, ​with the same meaning.
我很惊讶没有人提到我最喜欢的这个问题的解决方案之一，<wbr>（可选的换行符）标签。它在浏览器中得到了很好的支持，并且基本上告诉浏览器它可以在必要时插入换行符。还有相关的零宽度空格字符，​含义相同。
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 Ncharacters in words that are too long, or in links.
对于提到的用例，在网页上显示用户评论，我假设已经有一些输出格式来防止注入攻击等。所以很容易在太长的单词或链接中的<wbr>每个N字符添加这些标签.
This is especially useful when you need control over the format of the output, which CSS doesn't always let you do.
当您需要控制输出的格式时，这尤其有用，而 CSS 并不总是允许您这样做。
回答by Tim Knight
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 cLFlaVApoints out... it is better to use autothen scroll. I do agree with him.
编辑：正如cLFlaVA指出的那样......最好使用autothen scroll。我同意他的看法。
回答by inspite
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?
问：如何将 100 厘米宽的物体放入仅 99 厘米宽的空间中？
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
请查看此解决方案 如何使用 css 应用换行/延续样式和代码格式
or
或者
回答by Ers
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);
}
回答by Jon Galloway
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 的方法，但没有找到任何跨浏览器工作的方法。
回答by Jimmy
I dodge the problem by not having my right sidebar fixed like that :P
我没有像那样固定我的右侧边栏来躲避这个问题：P
