相关疑难解决方法(0)
CSS:如何强制将长字符串(没有任何空白)强制包装在XUL和/或HTML中
我有一个长串(DNA序列).它不包含任何空格字符.例如:
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA
什么是css选择器强制将此文本包装在html:textarea或xul:textbox中
推荐指数
解决办法
查看次数
如何防止长话破坏我的div？
自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:
问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.
RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.
严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").
有没有人有这个可行的解决方案？
推荐指数
解决办法
查看次数
css/js中的自动换行
我正在寻找一种跨浏览器的方式来包装具有预定宽度的div内部没有间隔空格(例如长URL)的长文本部分.
以下是我在网络上发现的一些解决方案以及它们为什么不适合我:
- 溢出:隐藏/自动/滚动 - 我需要在不滚动的情况下显示整个文本.div可以垂直增长,但不能水平增长.
- 注射和害羞; 通过js/server-side 进入字符串 - 现在由FF3支持,但用复制和粘贴URL; 在中间将无法在Safari中工作.此外,据我所知,没有一种简洁的方法来测量文本宽度,以找出最佳的字符串偏移量来添加这些字符(有一种hacky方式,请参阅下一项).另一个问题是放大Firefox和Opera很容易打破这个问题.
- 将文本转储到隐藏元素并测量offsetWidth - 与上面的项目相关,它需要在字符串中添加额外的字符.此外,测量长文本中所需的中断量可能很容易需要数千个昂贵的DOM插入(每个子串长度一个),这可以有效地冻结站点.
- 使用等宽字体 - 再次,缩放可能会弄乱宽度计算,并且文本无法自由设置样式.
看起来很有希望但不完全存在的事情:
- 自动换行:break-word - 它现在是CSS3工作草案的一部分,但它还没有得到Firefox,Opera或Safari的支持.如果它适用于所有浏览器,这将是理想的解决方案:(
- 通过js/server-side 将<wbr>标签注入到字符串中 - 复制和粘贴URL适用于所有浏览器,但我仍然没有很好的方法来测量放置中断的位置.此外,此标记使HTML无效.
- 在每个字符后添加中断 - 它比数千个DOM插入更好,但仍然不理想(将DOM元素添加到文档中会占用内存并减慢选择器查询速度等).
有没有人对如何解决这个问题有更多的想法？
推荐指数
解决办法
查看次数
如何使用自动CSS连字符和`word-break:break-all`？
我正在使用word-break: break-all;并想知道如何让浏览器自动插入连字符,如MDN示例中所示.
div {
width: 80px;
height: 80px;
display: block;
overflow: hidden;
border: 1px solid red;
word-break: break-all;
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
}<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>这样文本看起来像这样:
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa
我也创建了一个JSFiddle.
这需要在IE9/IE10中运行,但如果它在Firefox和Chrome中也可以使用它会很好.
推荐指数
解决办法
查看次数
WebKit连字符
有没有人成功地在任何WebKit浏览器中实现连字符？我也尝试过CSS3 hyphenation风格-webkit-hyphens: auto.其中任何一个都没有骰子.或者也许我做错了什么？
注意:我在Mac上只尝试过Safari和Chrome.
更新:代码示例
<html>
<head>
<style>
div {
-webkit-hyphens: auto;
}
</style>
</head>
<body>
<div style="width: 150px; border: solid 1px black;">
<p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p>
<p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
在小方框中包装长电子邮件地址
我有一个宽度为118像素的盒子,其中包含一个电子邮件地址.我用来word-wrap: break-word;更好地包装地址.但是在一种特殊的地址上,这会让情况变得更糟.
big.ass.email@addre
ss-
is.extremely.lame.de
因为word-wrap: break-word;它在"addre"之后中断但是由于地址的其余部分不适合在一行中,它在"首选断点"处再次中断,恰好是" - ".在期望的行为中,电子邮件地址中的第二个中断不会在" - "之后,而是在"极端"之后.我担心只用CSS就不可能.不是吗？
在这里你可以看到一个小例子:http://jsfiddle.net/sbg8G/2/
推荐指数
解决办法
查看次数
使用CSS打破单词
当<p>标签中的文字太长时,看起来像这样,如何用CSS防止这种情况？我已经尝试过CSS属性,word-break: break-all;但Firefox和Opera不支持这个属性,而且其他"正常"的单词也在破坏.所以我想要打破很长的单词,而不是短单词,取决于白色的宽度<div>.
body {
background-color: #ccc;
}
h2 {
float: left;
color: #525254;
margin: 0px;
font: bold 15px Arial, Helvetica, sans;
}
.post {
background-color: #fff;
float: left;
clear: both;
padding: 20px;
width: 500px;
border-bottom: solid 1px #ddd;
}
.post_cell {
display: table-cell;
vertical-align: middle;
}
.post_body {
display: table-cell;
width: 400px;
opacity: 0.8;
}
.profile_img {
border: solid 3px #ccc;
width: 48px;
height: 48px;
margin: 0px 15px;
}
.post_info {
color: #c3c3c3;
font: …推荐指数
解决办法
查看次数
在分词之前添加连字符
也许这是不可能的,但我想知道是否有一种方法可以在断开单词之前自动将连字符插入到长字符串的末尾而没有空格？这个 jsfiddle展示了我遇到的问题.谢谢.
table {
width:200px;
word-wrap:break-word;
table-layout: fixed;
}
<table>
<td>Pneumonoultramicroscopicsilicovolcanoconiosis</td>
</table>
推荐指数
解决办法
查看次数
Div溢出没有单独的线
可能重复:
wordwrap一个很长的字符串
我的代码
<div style="width:40px;">adfdddddddddddddddddddd</div>
此代码应该生成4行,但它在一行中显示输出.
推荐指数
解决办法
查看次数
标签 统计
css ×9
html ×6
word-break ×2
word-wrap ×2
break ×1
css3 ×1
hyphenation ×1
javascript ×1
layout ×1
string ×1
text ×1
webkit ×1
xul ×1