如何换行一个非常长的单词

5
我正在开发一个C#网络应用程序,在其中一个部分中,我们在小框中显示用户评论。似乎有一个人写了一长串文字导致框变大。
如何避免长单词超出容器大小?
例如,如果用户写了以下内容:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
而我的框宽度较短,
我应该让它适应框的大小。

什么叫做“让它适应”?你是想把这个单词切成两半吗? - Douwe Maan
1
也许我得不到一些问题的答案,David。 - Brian Roisentul
DouweM,您可以在上面看到我的长单词会发生什么,它影响了页面的设计,我不希望它在我的网站上发生,因为由于其大小,该框将覆盖其他框。 - Brian Roisentul
4个回答

8
使用CSS属性word-wrap: break-word。这会强制长行折成下一行。

我曾经看到过这个,并且在一些浏览器上可以使其工作,但是我读到并不是每个浏览器都支持这个属性,你知道任何其他方法来解决它在不工作的浏览器中应用的问题吗? - Brian Roisentul

4

一种常见的做法是检查字符计数并用较短的字符串和省略号替换长字符串。

aaaaaa...

然后,如果您愿意,可以在鼠标悬停时显示完整文本。

<div title="aaaaaa....aaaa">aaaaa...</div>

在代码中,您可以这样做

text = allText.SubString(Min(allText.Length, 80))

并与其他答案中列出的CSS样式结合使用。


这个也可以工作,虽然我不知道网站的所有者是否会接受这个解决方案。但无论如何,还是非常感谢。 - Brian Roisentul
很抱歉,我想了想,我觉得这对于这种情况不是一个好的选择,原因如下:假设您编写了一篇普通的文本,如“Hello World,我正在Stackoverflow上发表评论”,那么我可以让它读作“Hello World,我正在写...”,但如果我有一个没有空格的单词,例如“我的专业领域是:软件/硬件/体育/动物/经济学家/律师”,并且将其截断为“硬件”,因为它太长而无法适应div的宽度。用户只会阅读一行,就这样...在第一个示例中,用户将看到充满文本的框。 - Brian Roisentul

3

我喜欢使用

overflow:hidden;

这些往往是异常值,通常是错误。

CSS overflow 属性


由于溢出的原因,我无法截断注释。例如,如果我写“Hi,howareyoudoingtoday?”并且它比其容器更宽,我不能像“Hi,howareyoudoin”一样做截断。 - Brian Roisentul
这种情况会经常发生吗?大多数人会写成“你好,今天怎么样?”这样可以正确换行。你也可以尝试像这样的代码“overflow-y: hidden;”,但这在许多旧浏览器中不被支持。 - Bertine
问题在于这个人用“/”分隔了专业领域,但我不能依靠它来进行分割,因为如果有人没有使用它,那么就相当于什么都没有写。 - Brian Roisentul

0

你可能想要查看软连字符。这是一个在大多数情况下不可见的字符,用于换行。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接