ナビゲーションからオーバーフローしている<ul>項目 - css、html-lists、overflow

これはこのサイトでの私の最初の投稿です。

私は現在、 ウェブサイト ワードプレスを使用して構築され、そして私はCSSに問題があります。

私のメニューバーはulで作られていて、ナビゲータのテキストサイズを大きくすると（例えばctrl + scrollで）、次のようにdivからli項目がオーバーフローします。 この画像.

この場合、私はliを分割したいのですが二つの部分で、そしてdivに収まるが、私はそれを実現する方法を見つけられませんでした。私はすでに「単語分割」の解決策を試したことがありますが、私はそれを間違ってやっていたと思います。

私のサイトはWordpressでホストされているので、デザインには2つの異なるCSSシートが使用されていますが、少し面倒です。

これが私のシートの一部です：

#access {
display:inline-block;
width:27%;
font-size:100%;
margin:2.5% auto 6px;
border:none;
padding-top:10px;
padding-bottom:10px;
overflow:hidden;}

#access a {
display:inline-block;
max-width:100%;
color:rgb(0,102,138);
font-size:22px;
padding:none;
line-height:30px;}

#access li {
display:block;
padding:4px;
float:none;}

#access ul {
list-style:none;
font-size:100%;
margin:0;}

テーマのCSSリンクは投稿できません。新しいメンバーとして、投稿ごとに2つのハイパーリンクに制限されているためです。

ご協力ありがとうございました。

回答：

これらのメニュー項目には、改行なしのスペースが含まれています。

コーチング専門職

コーチング親

Coaching professionnel
Coaching parental

つまり、テキストのサイズが大きくなっても、テキストは1行に収まります。

また、＃accessがオーバーフローしました。それを削除し、改行なしのスペース - （ "＆nbsp"）を削除すると、単語は正しく折り返されます。