自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:
问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.
RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.
严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").
有没有人有这个可行的解决方案?
您可以通过插入soft hyphen(
)告诉浏览器在哪里拆分长字:
averyverylongword
可以呈现为
averyverylongword
要么
averyvery-
长字
一个好的正则表达式可以确保你不会插入它们,除非必要:
/([^\s-]{5})([^\s-]{5})/ ? $1$2
浏览器和搜索引擎足够聪明,可以在搜索文本时忽略此字符,Chrome和Firefox(未测试其他人)在将文本复制到剪贴板时忽略它.
元件另一种选择是注入
一个以前的IE-ism,现在是HTML5:
averyverylongword
断点没有连字符:
非常
长的话
您可以使用零宽度空格字符
(或
)来实现相同的效果.
仅供参考,最新的IE,Firefox和Safari支持CSShyphens: auto
(但目前不支持Chrome):
div.breaking { hyphens: auto; }
然而,该连字符基于连字词典,并且不能保证打破长词.它可以使合理的文本更漂亮.
两个修复: 如果(在SO示例中)你想要阻止它与填充重叠,你可能必须在填充内创建另一个div来保存你的内容. 编辑:正如其他答案所述,有多种截断单词的方法,就是在客户端计算渲染宽度(永远不要尝试执行此服务器端,因为它永远不会可靠地工作,跨平台) JS和插入中断字符,或使用非标准和/或非常不兼容的CSS标记( 但是,您总是需要溢出描述符.如果你的div包含另一个太宽的块类型的内容(图像,表格等),你需要溢出才能使它不破坏布局/设计. 因此,无论如何都要使用其他方法(或它们的组合),但请记住添加溢出,以便覆盖所有浏览器. 编辑2(以解决下面的评论): 开始使用CSS 这将隐藏溢出的内容,因此您可能会失去意义.您可以使用滚动条(使用 为了解决这个问题,我们可以使用JS来回退并进行某种形式的自动截断.我在为你编写一些伪代码的过程中,但是在中途变得非常复杂.如果您需要尽可能多地显示,请查看连字符(如下所述). 请注意,这是以用户的CPU为代价的.这可能导致页面花费很长时间来加载和/或调整大小. 正如我们所知,这是一个复杂的问题,浏览器之间的任何常见方式都不支持.大多数浏览器根本不支持此功能. 在使用HTML电子邮件完成的一些工作中,使用了用户内容,但是脚本不可用(甚至CSS也不受支持),在你的非空格内容块的包装中,下面的CSS应该至少有所帮助: 对于基于Mozilla的浏览器,上面提到的XBL文件包含: 遗憾的是,Opera 8+似乎不喜欢上述任何解决方案,因此JavaScript必须是这些浏览器的解决方案(如Mozilla/Firefox).另一种跨浏览器解决方案(JavaScript)包括Opera的更高版本将使用Hedger Wang的脚本:http:
//www.hedgerwow.com/360/dhtml/css-word-break.html 其他有用的链接/想法: 不兼容的Babble»博客存档»为Mozilla/Firefox模拟CSS自动换行 [OU]在Opera中没有自动换行,在IE浏览器中显示正常 CSS跨浏览器Word Wrap 使用风格 你的意思是,在支持它的浏览器中,它 如果包含在样式表的正文定义中,它应该适用于整个文档. 如果溢出不是一个好的解决方案,只有自定义的javascript可以人为地分解长字. 注意:还有这个 刚刚检查了IE 7,Firefox 3.6.8 Mac,Firefox 3.6.8 Windows和Safari: 适用于具有设置宽度的div内的长链接,并且在css中没有声明溢出: 我没有看到任何不兼容问题 我只是发现了连字符从这个问题.这可能会解决问题. 经过多次战斗,这对我有用: 适用于最新版本的Chrome,Firefox和Opera. 请注意,我排除 对于我没有固定大小和动态内容的div,它使用:对于布局是不好的,但
display:table
在其他元素上是好的.它将像老式的桌子一样古怪(和有弹性):
div.breaking {
display: table-cell;
}
overflow
和white-space: pre-wrap
下面的答案也很好.
这打破了复制/粘贴.
凉!根据维基百科,您可以使用获得零宽度空间. - 既然你提出了它,你知道一个不那么难看的逃脱代码吗?如果必须的话,我会记住8203,但......
仅供参考,您也可以使用
2> Oli..:
overflow:scroll
- 这确保您的内容可以以设计为代价(滚动条很难看)overflow:hidden
- 只是切断任何溢出.这意味着人们无法阅读内容.word-wrap: break-word
似乎在Firefox中不起作用).overflow
属性并不完美,但它会阻止设计破解.overflow:hidden
先申请.请记住,溢出可能不会在填充上破坏,因此要么嵌套,div
要么使用边框(任何最适合您的边框).overflow:auto
或overflow:scroll
代替overflow:hidden
),但根据div的尺寸和您的设计,这可能看起来不太好或者效果不佳.
3> Neil Monroe..:.word-break {
/* The following styles prevent unbroken strings from breaking the layout */
width: 300px; /* set to whatever width you need */
overflow: auto;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
-moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-用户/ 2004年11月/ 024468.html
4> Remo..:.word_wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
5> sanimalp..:word-break:break-all;
.我知道它适用于桌子.
6> VonC..:word-wrap: break-word
不起作用?
Word Break标记.这为浏览器提供了一个可以分割线的位置.不幸的是,
标签不适用于所有浏览器,只有Firefox和Internet Explorer(以及带有CSS技巧的Opera).
7> Zac Imboden..:word-wrap: break-word;
#consumeralerts_leftcol{
float:left;
width: 250px;
margin-bottom:10px;
word-wrap: break-word;
}
8> dylanfm..:
9> mpen..:.pre {
font-weight: 500;
font-family: Courier New, monospace;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
white-space
了其他人建议的许多属性 - 这实际上打破了pre
我的缩进.
10> Jacob..:display:table;
word-break:break-all;
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有