问题标签 [css-hyphens]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
751 浏览

html - Chrome 中较长单词的 CSS 连字符问题

我正在尝试使用 CSS 连字符来连接长词,例如在 这个例子中

如您所见,最后一个字母落在新行上。这发生在 Chrome 中,而不是在 Safari 中。由于我的布局使用了一定宽度的块,并且我想将单词放入块中,因此解决方案不是更改字体大小或块宽度,而是解决连字符问题。

在最后一段中,“Y”在没有任何连字符的情况下落在新行上。

这是 CodePen 示例。在 Safari 中运行良好,在 Chrome 中无法运行:

感谢您的任何建议。

0 投票
1 回答
272 浏览

css - 为什么 CSS 连字符在 IE11 和 MS Edge Legacy 中不起作用?

我正在为德国的一家大公司开发 Intranet 门户。由于大公司的技术流程有时运行速度会慢一些,因此他们仍然使用 IE11 和旧的 MS Edge 浏览器。

由于这些旧浏览器支持 CSS 连字符:auto(参见:https ://caniuse.com/css-hyphens),我开发了一个小 CSS,它可以启用 CSS 连字符:

所以无论我设置类“连字符”,CSS连字符都会被激活。

这适用于我的计算机安装的 IE11 和旧版 Edge,但不适用于我客户的客户端。在他们的 Edge 和 IE11 浏览器中都没有。

我检查了那些计算机上的 CSS 是否正确加载。如果我添加一条规则

分类“连字符”,它得到正确应用。只是连字符没有被应用。

我发现我的本地 Edge 版本与我的客户拥有的版本不同。我在版本中使用 Edge 和 IE11

Microsoft Edge 42.17134.1098.0
Microsoft EdgeHTML 17.17134
IE11:11.1667.17134.0

而我的客户有

Microsoft Edge 44.17763.831.0
Microsoft EdgeHTML 18.17763
IE11:11.1457.17763.0

安装。

我们都使用 Windpw 10 并将德语设置为主要语言(我认为 IE11 和 Edge 都使用操作系统语言,没有单独的浏览器语言)。

我使用 HTML 语言属性集进行了测试,但未设置。对我来说没有区别(两种情况都有效),对我的客户来说没有区别(两种情况都不起作用)。

目前我不知道为什么连字符似乎只在我的机器上工作。可能有一些我不知道的设置吗?任何提示我如何调试它?它们是否有可能通过 Windows 组策略被(停用)激活?

问候和非常感谢。

0 投票
4 回答
147 浏览

html - 当我从本地文件和 Codepen 打开相同的代码时,它看起来会有所不同。为什么会这样?

这是 Chris Coyier 的一支笔,在他的文章处理长词和 URL中提到:https ://codepen.io/team/css-tricks/pen/RWaNxr 。

如果您只是在浏览器中打开此链接,它在 Firefox 中的外观如下:

在此处输入图像描述

如果将所有内容复制到本地 HTML 文件中,它的外观如下:

在此处输入图像描述

为什么看起来不一样?

0 投票
1 回答
54 浏览

html - 如何在 html 或 css 中分词?

我正在尝试像这样在行尾打断单词,例如“Lorem ipesm ”,我正在使用word-break:break al 但它不能添加“-”它只能作为示例“ Lor em ipesm” 我该如何解决这个问题?

0 投票
2 回答
94 浏览

css - 带有 css `hyphens` 的自动换行无法换行子字符串

我最近从 切换overflow-wraphyphens用于断行之间的文本。但是,我遇到了一个似乎无法在某个子字符串之前连字任何单词的情况。我不知道为什么会这样。

观察下面的 gif,要显示的完整字符串是/people/type:astronauts/name-gregory-chamitoff/profile当宽度小于大约210px没有子字符串中的单词/people/type:astronauts/name-被连字符并推送到下一行时。但是,210px连字符工作正常的时间更长。这几乎就像将这个子字符串视为一个连续的单词。

在此处输入图像描述

我发现解决此问题的唯一方法是使用下面类似的东西作为包罗万象的东西。然而,这很好,它不会优先考虑断字而不是断词。我正在寻找除此之外的其他解决方案,这些解决方案hyphens适用于所有或大多数字符串,甚至是这种情况!

0 投票
0 回答
34 浏览

css - 仅当单词太长而无法排成一行时,如何获取连字符?

一段时间以来,我一直在为溢出换行、断字和连字符苦苦挣扎,但要获得完美的结果似乎几乎是不可能的。基本问题是我希望长词换行以避免破坏我的布局。但我只希望在确实有必要时进行换行,即只有当单词没有足够的空间容纳一行时。我注意到,特别是Firefox在设置时非常慷慨(以一种糟糕的方式)hyphens: auto,导致比实际需要的包装更多。很长的段落可能会充满连字符,这使得文本非常难以阅读。

以这支笔为例:https ://codepen.io/monodrive/pen/vYJqMxN

在 Firefox 中打开它并与 Chrome 进行比较。Firefox 打破了“daten”这个词,即使它完全适合下一行而不需要连字符。Chrome 做了我期望它做的事情,将整个单词“daten”放在下一行。

所以我的问题是,有没有办法告诉浏览器只在真正需要时才使用连字符,就像 Chrome 默认做的那样?