テキストと同じ行にリンクが表示されない

Question

自分のdiv内のテキストと同じ行にリンクを表示します。今度は次の行に現れます。

現在の状況は

Some text 
http://example.com/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link.html 

期待される結果ではなくなっている。

Some text http://example.com/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link.html 

HTMLコード：

<div> 
    <ol> 
    <li> 
     Some text <a href="#">http://example.com/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link/very-long-link.html</a> 
    </li> 
    </ol> 
</div> 

CSSコード：

a { 
    word-wrap: break-word; 
    display: inline; 
} 

更新日：

ハイフンを追加して削除すると、結果が異なります。問題を再現するには、jsfiddleのブラウザウィンドウのサイズを1000px未満に変更してください。 https://jsfiddle.net/6xnqnwmw/

Answer 1

テキストリンクがli要素（最大）幅をオーバーフローしている可能性があります。

overflow: visibleを設定するか、リンクがCSSの同じ行に収まるようにli要素の幅を増やすことができます。

編集

それは溢れの問題点でした。私は李 の幅を非常に広くすることで修正しました。 （ハックのビットがあなたのために働くかもしれない）。

https://jsfiddle.net/mb9aLaLa/1/

編集2：あなたは、ワードラップを使用することができます破る-すべてをこの https://jsfiddle.net/mb9aLaLa/3/