css - 没有换行，但长词进入下一行

Question

我现在玩了一段时间的自动换行和空白，但我无法让它工作。我不想在我的标题中分词，所以长词应该放在下一行。为了澄清这一点，如果容器太小，我不希望它这样：

A veeeeeeeeeeeeeeee-
eeeeery long heading

我希望它是这样的：

A
veeeeeeeeeeeeeeeeeeeeery
long heading

这是我的标记：

<header>
    <h3>Some random blog heading</a></h3>
</header>

CSS：

article h3{
width:200px;
word-wrap:normal;
word-break: normal;
white-space: nowrap;
}

我想我尝试了所有可能的组合，但它没有达到我想要的效果。我无法想象这是不可能的。

Answer 1

如果您当前看到一个单词被分成两行，就像在第一个示例中那样，并且您不希望这样，您只需要找到导致单词分割的东西。这可能是带有hyphen属性的 CSS 断字，也可能是由 SOFT HYPHEN 字符（可能通过脚本插入），甚至是单词中常见的连字符“-”引起的——大多数浏览器将其视为允许在其后换行.

如果您在分析方面需要帮助，我认为您需要揭示一些实际内容和标记，也许还有样式和脚本。

Answer 2

Apply css on it

<div style="word-wrap:break-all;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>

or

<div style="word-wrap:break-word;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>