0

しばらくの間、ワードラップと空白をいじっていますが、これを機能させることができません。見出しに単語を分けたくないので、長い単語は次の行に入れるだけです。これを明確にするために、コンテナが小さすぎる場合は、次のように動作させたくありません。

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;
}

可能な限りの組み合わせを試したと思いますが、思い通りにはいきませんでした。それが不可能だとは想像できません。

4

2 に答える 2

0

最初の例のように単語が 2 行に分割されていて、それを望まない場合は、単語の分割の原因を特定する必要があります。これは、プロパティを使用した CSS ハイフネーションであるhyphen可能性があります。また、SOFT HYPHEN 文字 (スクリプトによって挿入される可能性があります)、または単語内の一般的なハイフン文字 "-" が原因である可能性もあります。ほとんどのブラウザーは、その後に改行を許可するものとして扱います。 .

分析の助けが必要な場合は、実際のコンテンツとマークアップ、そしておそらくスタイリングとスクリプトの一部を明らかにする必要があると思います.

于 2013-03-08T11:38:33.790 に答える
-1 
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>
于 2013-03-08T11:17:10.760 に答える