WebKit의 인접 요소에 nowrap이 붙는 요소가 있습니다.

Question

가로형 메뉴로 표시되는 ul 목록이 있습니다. li 각각의 내용을 한 줄에 유지하고 싶지만 전체 li 항목은 필요에 따라 줄을 바꿉니다. 같은 뭔가 :

First entry in the menuSecond menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter][And more][Some more]

논리적으로, 난 그냥 li {white-space:nowrap;}을 넣고 싶지만, 웹킷 브라우저에 문제가있는 것입니다. nowrap가있는 항목이 인접한 항목에 붙어 있습니다. 따라서 위의 경우 li은 모두 같은 줄에 있습니다.

포장 텍스트 블록 안에 nowrap 인 고립 된 요소에 대해서도 마찬가지입니다.

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic 
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog 
(Romanian)</a>. 

내가 기대하는 것은 같은 것입니다 :

내 사이트 가브리엘 Radic를 방문 .COM 또는 대신
Timbru 블로그

, 두 개의 링크가 함께 붙어 결국 , like :

내 사이트 방문 01 23, 가브리엘 Radic의 .COM 또는 Timbru 블로그 (루마니아어)

명의 팔꿈치를 잡아 중지 사파리, 크롬 등을 알 수있는 좋은 방법이 있나요?

도움 주셔서 감사합니다.

Answer 1

white-space:nowrap 대신에 display:inline-block을 사용하는 것이 더 적절합니다.

변경을 위해 CSS를 적용해야하지만 예상대로 작동해야합니다.

Answer 2

그래서 제대로 이해하면 목록 항목 내부의 텍스트가 줄 바꿈되기를 원하지만 메뉴 자체는 그렇지 않습니다. 이 같은 보이도록 :

item one | item two | item number | item four 
         three 

을하지만 같이하지 : 그런 경우에는

item one | item two | item number three | 
item four 

는 대신 목록 항목에서의 실제 ul에 nowrap 설정 시도가 포장하지 않으려 고 시도하는 것은 ul이므로? 그런 다음 목록 항목 너비를 설정하여 너비에 맞게 줄 바꿈합니다.