文章/答案/技术大牛

发布

社区首页 >问答首页 >有连字符的奇怪事物

问有连字符的奇怪事物
EN

Stack Overflow用户

提问于 2022-04-30 11:13:33

回答 1查看 45关注 0票数 0

在Firefox中，连字符既适用于普通文本，也适用于超链接，原因我不明白。

然而，由于我有:not(a)伪类，所以选择器不应该影响a元素，也就是说，超链接不应该被连字符。

换句话说，我认为浏览器应该将div :not(a)理解为“div中的任何元素，除非这样的元素是a元素”。但它似乎不像我期望的那样起作用..。

还有一个附带的问题。

如果第一个字母是大写字母，那么Chrome/Edge和Firefox连字符为什么都不能理解呢？

我的代码：

body {
  outline: 1px solid red;
  width: 5em;
}

div :not(a) {
  hyphens: auto;
}

a {
  overflow-wrap: break-word;
  word-break: break-word;
}

<div>
  <p lang="en-US">
    incomprehensibility incomprehensibility incomprehensibility
    <a href="https://incomprehensibility.inc/">https://incomprehensibility.inc/</a>
    incomprehensibility
  </p>
</div>

css

pseudo-class

css-hyphens

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-30 12:39:41

只需在hyphens上禁用a

body {
  outline: 1px solid red;
  width: 5em;
}

div {
  hyphens: auto;
}

a {
  hyphens: initial; /* this */
  overflow-wrap: break-word;
  word-break: break-word;
}

<div>
  <p lang="en-US">
    incomprehensibility incomprehensibility incomprehensibility
    <a href="https://incomprehensibility.inc/">https://incomprehensibility.inc/</a>
    incomprehensibility
  </p>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72068004

复制

相似问题

问有连字符的奇怪事物
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有连字符的奇怪事物EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有连字符的奇怪事物
EN