问题标签 [css-hyphens]

我想在第一行末尾用连字符打破长词。

预期的：

明白啦：

这是我的html和css：

你可以查看我的JSFiddle

我正在尝试在帮助孩子学习阅读的网站上将单词拆分为音节。事实证明这很难。

JavaScript 连字符库很大。hyphens: auto;Chrome 浏览器已经可以使用CSS3 标签自动连字符。我想对浏览器中的文本行说：“嗨！请告诉我您考虑拆分这些单词的所有可能方式，谢谢！”

这意味着我需要以某种方式“阅读”包含在非常狭窄的 div 中的连字符的结果。AFAIK 你不能抓取文本 - 连字符只是一个显示的东西。有什么方法可以找出单词在哪里连字符？

https://jsfiddle.net/8v5xxuh1/

此代码显示了两个 div 容器。在 div 上设置了aid display: flex;。在两者上，我们都使用-ms-hyphens: auto;. 但在 IE 或 Edge 中，连字符仅适用于没有附加 flexbox 的 div。正如预期的那样，它在 Chrome 和 Firefox 中运行良好。

https://codepen.io/anon/pen/jmGxJZ

有人有解决方案吗？

我有这个正则表达式来检测 CSS 文件中的连字符 BEM

但我也希望它也能检测到 CamelCase ......

我需要这样做，因为我们正在从 hyphenatedBEM 过渡到 camelCase

简而言之，我如何编写一个正则表达式来检查

如果两者都没有验证，那么它会出错/返回 false

我会像下面这样针对 CSS 进行验证，并且两者都应该验证得很好......

任何帮助将不胜感激...

我正在尝试让连字符处理<span>包含用于突出显示的元素的文本。这似乎打破了连字符算法。有什么办法可以解决这种行为，以便连字符的放置与没有<span>元素的情况相同？我不是在问像这样的解决方法­

代码（沙盒：https ://codepen.io/anon/pen/ayzxpM ）：

使用 lang 属性

按照 Vadim Ovchinnikov 的建议 ( <div class="limit" lang="en">) 添加 lang 属性可以在某些平台/浏览器组合上产生更好的结果。在 Firefox 54、Windows 10 上，结果如下：

但即使这样似乎也有问题。在我看来，连字符应该是黑色的，连字符算法似乎错过了在“fruit”和“tree”之间换行的机会，也完全忽略了max-width为容器设置的那个。

我目前正在尝试用 JS 编写刽子手游戏（我是 WEB 技术的新手），我遇到了第一个障碍。我要猜测的单词的占位符字符串，即一串连字符和空格，突破了包含它的 div 的末尾。

例如

如果行尾有 7 个破折号占位符，则它会分成 6 个位于顶行的破折号和一个位于底线的破折号。

看起来很糟糕。如何防止这种行为并将我的猜测句子保持为一个字符串？

抱歉，如果我错过了代码的任何其他必要部分。我很乐意接受任何帮助，因为我无法通过谷歌找到任何帮助。

FireFox 单词可以用 css 打破，但一次一个字母，而不是连字符应该在哪里？？？

不是火狐：

火狐：

这是CSS：

如何强制浏览器仅对太长而无法在屏幕上显示的单词以及非常长且在完全包裹时留下大间隙的单词进行软连字符？

当前的行为并不聪明（浏览器在每行的末尾插入连字符（基本上一直连字符））。

编辑：有没有办法将自动连字的最小字长设置为容器宽度的百分比？例如，我只希望超过行长 50% 的单词符合断字条件。

我有一个较小的侧容器，#sideNavContainer在父 div 中，另一侧（右侧）是内容的另一个 div。

当我将文本放入#sideNavContainer包含很长没有空格的单词时，这些单词开始脱离容器并覆盖右侧（内容区域）的内容。

我试图强制 的内容#sideNavContainer分解这些单词，以便它们在下一行继续，当它们到达容器的右端但我不是 100% 满意，因为我期望单词/句子也应该是最好在空间上打破。长词应该从下一行开始，然后被分解，而不是与其他文本在同一行开始（在空格之后），然后继续（但被分解）。

这是一些示例，希望能说明我的意思：

CSS：

小提琴：https ://jsfiddle.net/qp74uxkt/11/

我的愿望/期望是文本会在“我是一个很长的文本”之后中断，然后在下一行继续“andIevenContain ...”，然后这个长词可以在可用空间的末尾被打破，基于父容器的限制。当我使用“连字符：auto;”时，这也不起作用。这甚至可以做到吗？

我正在编辑我的网站，有一个很长的词我不得不使用连字符。我做了一些研究，有一个使用“自动”的选项，所以我不必手动进行。但是当我在我的检查器中编辑它时，它说“无效的属性值”我无法弄清楚为什么会发生这种情况。

有谁知道这是从哪里来的？或者有人对此有解释吗？

我尝试了所有其他选项，它们都起作用了....甚至 w3schools 都说它是一个选项 https://www.w3schools.com/cssref/css3_pr_hyphens.asp

我知道有一种使用分词的替代方法，但是当你使用它时你没有得到“-”。