줄 바꿈 없는 div CSS의 랩_경험 교환

예를 들어 ul에는 너비가 210px인 4개의 li가 있습니다. 이 4개의 li의 너비는 자체 콘텐츠 길이에 따라 80px, 120px, 140px 및 80px입니다.
나에게 필요한 효과는 4개의 리가 자동으로 왼쪽으로 배열되는 것입니다. 세 번째 li와 처음 두 li의 길이의 합이 ul의 너비보다 크면 세 번째 li가 한 줄 아래로 이동합니다. 두 번째 줄에 표시됩니다. ul을 더 넓게 만들거나 자체적으로 더 크게 만드는 대신(콘텐츠가 줄바꿈되고 높이가 증가함)
ul의 너비를 210px로 정의하고 li의 너비를 자동으로 정의한 결과는 다음과 같습니다.
ul은 늘어나지 않습니다. . li가 다음 순서와 동일한 순서로 자동 정렬되지 않는 것은 아쉽습니다. 대신 내용이 줄 바꿈되고 li가 올라갑니다. 그런 다음 뻔뻔하게 첫 번째 줄에 압착되었습니다. .
신중하게 고려한 결과 문제는 li 내부 내용의 줄 바꿈에 있는 것으로 생각됩니다. 그래서 줄바꿈을 금지하는 CSS 속성을 찾아봤습니다.
온라인에서 확인했는데 못 찾았어요. 그룹에서 나가무 리위에에게 물어보니 단어 분리 속성을 얻었습니다. 모두 유지; 줄 바꿈 없음. .
li에 추가한 후 문제가 해결된 것을 보고 놀랐습니다.
작업그룹 페이지 디버깅을 하던 중, 누군가 표시 문제가 있다는 지적을 받았습니다.
다가가서 살펴보니 디스플레이가 바뀌지 않았습니다. 그냥 브라우저 버전 문제일 수도 있다고 생각했습니다.
저는 IE7과 FF를 사용하고 있으며 그들은 IE6을 사용하고 있습니다. DW에서 확인한 결과 IE6에서는 word-break 속성이 실제로 지원되지 않는 것으로 나타났습니다.
CSS 속성 word-break는 지원되지 않습니다. Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0

이전에도 이 문제로 인해 정말 답답했습니다. 해결된 적이 없습니다.
그 친구 좋은 방법이 있는 것 같은데 조언 부탁드려요! 많은 감사를 드립니다.


문제가 해결되었습니다. 그렇게 말하는 것이 재밌습니다. DW에 코드를 수동으로 입력하세요.
속성에서 nowrap을 찾았는데 이거 word-braek의 nowrap 아닌가요? 줄 바꿈을 방지할 수 있나요?
한 번 해보자는 마음으로 완전히 입력했습니다
white-space:nowrap;
DW 테스트에 밑줄이 없어 브라우저 지원에 문제가 없습니다.
F12를 저장하세요. 문제가 해결되었습니다. 헤헤. . .


다음 구문을 적어보세요.

구문:
white-space : Normal | pre | nowrap
값:
normal : 기본값 . 기본 처리 방법. 텍스트는 자동으로 줄바꿈을 처리합니다. 컨테이너 경계에 도달하면 내용은 다음 줄로 이동합니다.
pre : 줄 바꿈 및 기타 공백 문자가 보호됩니다. 이 값을 사용하려면 표준 호환 모드 지원으로 선언된 IE6+ 또는 !DOCTYPE이 필요합니다. !DOCTYPE 선언이 표준 호환 모드를 지정하지 않는 경우 이 속성을 사용할 수 있지만 아무런 효과가 없습니다. 결과는 Normal 과 동일합니다. pre 객체
nowrap 참조: 텍스트 끝이나 br 객체가 나타날 때까지 모든 텍스트가 동일한 줄에 표시되도록 합니다. noWrap 속성 참조

설명:
객체 내 공백 문자의 처리 방법을 설정하거나 검색합니다.
줄 바꿈, 공백, TAB과 같은 공백 문자는 HTML 문서에서 기본적으로 무시됩니다. 이 속성이 Normal 또는 nowrap 으로 설정되면 줄 바꿈 없이 명명된 엔터티를 사용하여 공백을 추가하고 br 요소를 사용하여 줄 바꿈을 추가할 수 있습니다. 이 속성은 IE에서 표시되는 콘텐츠와 마찬가지로 DOM(문서 개체 모델)을 사용하여 조작하는 콘텐츠에도 동일한 영향을 미칩니다.
이 속성은 블록 개체에 적용됩니다.
이 속성은 currentStyle 개체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 공백입니다.
출처:woria.cn