标签: css-hyphens
如何在Google Chrome浏览器中使用连字符？
我使用以下css在我的网站中自动连字符文本:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
但在铬合金中这没有效果.我已经读过,Chrome不支持这个.在chrome中是否有针对连字符的解决方法？谢谢!
推荐指数
解决办法
查看次数
css用连字符打破单词
我想用第一行末尾的连字符打破长词.
预期:
BERUFSBILDUNGSZENT-
RUM
明白啦:
BERUFSBILDUNGSZENT
RUM
这是我的html和css:
<div class="content">BERUFSBILDUNGSZENTRUM</div>
.content {
max-height: 80px;
width: 200px;
overflow-x: hidden;
word-wrap: break-word;
padding: 10px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-weight: bold;
font-size: 16px;
border: solid 1px #000;
}
你可以查看我的JSFiddle
推荐指数
解决办法
查看次数
CSS连字符在Firefox中不起作用？
我试图使用CSS连字符.它们在IE 11和Safari中工作,但在Firefox中无法正常工作,我不确定为什么.这是一个例子:
.container{
width: 16.6667%;
background:#ccc;
}
h3{
font-size: 0.95rem;
font-weight: 600;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}<div class="container">
<h3>DIAGNOSEVERFAHREN</h3>
</div>当您在Firefox中运行代码段时,该字DIAGNOSEVERFAHREN溢出容器并且不会中断.在Safari和IE中,它像我期望的那样打破.为什么这不适用于Firefox？
编辑
正如萨芬Tanalin的注意回答一个必须包括lang属性为连字符才能正常工作.我有这个作为我的<html>标签:
<html class="no-js" lang="de">
推荐指数
解决办法
查看次数
为什么连字符不能与内部 <span> 一起使用？
我正在尝试让连字符处理<span>包含用于突出显示的元素的文本。这似乎打破了连字符算法。有什么办法可以修复这种行为，使连字符的位置与没有<span>元素的位置相同？我不是在问类似的解决方法­
代码（沙盒：https : //codepen.io/anon/pen/ayzxpM）：
.limit {
max-width: 50px;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>使用 lang 属性
按照 Vadim Ovchinnikov 的建议添加 lang 属性 ( <div class="limit" lang="en">) 可以在某些平台/浏览器组合上获得更好的结果。在 Firefox 54、Windows 10 上，结果如下：
但即使这样似乎也有问题。在我看来，连字符应该是黑色的，连字符算法似乎错过了在“水果”和“树”之间换行的机会，也完全忽略了max-width为容器设置的。
推荐指数
解决办法
查看次数
使用连字符和Flexbox的Microsoft Edge错误
此代码显示了两个div容器。在与该ID的DIV a的display: flex;设置。两者都使用激活了连字-ms-hyphens: auto;。但是在IE或Edge中，连字符仅在未连接flexbox的div上有效。如预期的那样，它在Chrome和Firefox中运行良好。
div {
max-width: 100px;
background: red;
-ms-hyphens: auto;
hyphens: auto;
margin-bottom: 10px;
}
#a {
display: flex;
}<article>
<div id="a" lang="en">
Incomprehensibilities
</div>
<div id="b" lang="en">
Incomprehensibilities
</div>
</article>https://codepen.io/anon/pen/jmGxJZ
有人有解决方案吗？
推荐指数
解决办法
查看次数