텍스트와 동일한 줄에 링크가 나타나지 않습니다.

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 

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

,369

현재 상황은

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 

예상 결과 대신이다

업데이트 날짜 :

하이픈을 추가하거나 제거하면 다른 결과가 나타납니다. 문제를 재현하려면 jsfiddle에서 브라우저 창 크기를 1000px 미만으로 조정하십시오. https://jsfiddle.net/6xnqnwmw/

Answer 1

텍스트 링크에 ​​li 요소 (최대) 너비가 넘칠 수 있습니다.

overflow: visible을 설정하거나 li 요소의 너비를 늘려 CSS에서 같은 줄에 링크가 맞도록 설정할 수 있습니다.

편집

그것은 넘쳐에 문제가 있었다. 나는 그 너비가 매우 넓어서 너비로 고정시켰다. (해킹 비트이지만 당신을 위해 일할 수도 있습니다).

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

편집 2 : 당신은 줄 바꿈을 사용할 수 있습니다 : 브레이크 모든 당신이 원하는대로 그것은 이미 나타나고있다이 https://jsfiddle.net/mb9aLaLa/3/