목록에서 텍스트 포장을 중지하십시오

Question

주문 목록이 있습니다.

<ol>
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li>
<li>This is the Second g</li>
<li>This is the Third g</li>
<li>This is the fourth g</li>
<li> <strong>This is the fifth g</strong> </li>
<li>This is the seventh g</li>
<li>This is the eight g</li>
<li>This is the ninth g</li>
<li>This is the tenth g</li>
<li>This is the eleventh g</li>
<li>This is the twelvth g</li>
</ol>

다음과 같이 나타납니다.

1.  They used to bring concerns about their children or their marriages. But
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran
    minister in Springfield, Ill., about their financial worries, and that puts
    him in the unusual position of dispensing investment advice.
2.  This is the Second g
3.  This is the Third g
4.  This is the fourth g
5.  This is the fifth g
6.  This is the seventh g
7.  This is the eight g
8.  This is the ninth g
9.  This is the tenth g
10. This is the eleventh g
11. This is the twelvth g

첫 번째 항목과 같은 텍스트가 많으면 위와 같이 형식을 형식화하고 싶습니다. 나는 이것을 설정함으로써 이것을 달성 할 수 있었다 :

list-style-position:outside;

LI 및 OL 태그에서 일부 마진을 조정합니다. 그러나 이것은 내가 이중 및 트리플 숫자를 가졌을 때 약간의 부작용이있었습니다. 즉, 숫자가 차단 된 것처럼이 마진을 사용해야했습니다. 나는 다시 사용하기 위해 돌아갈 수 있기를 원한다. list-style-position 의 inside 여백을 제거하지만 텍스트는 내가 원하는 숫자 아래로 감싸십시오.

이 랩핑을 끄는 방법을 아는 사람이 있습니까?

Answer 1

사용 list-style-position:outside; 순서가없는 목록을 사용하고 있다면 마커를 위해 항상 같은 양의 공간을 차지할 수 있습니다. 주문 목록을 사용하고 있기 때문에 나는 list-style-position:inside;. 당신이 발견 한 바와 같이 문제는 IE와 Firefox가 마커의 숫자 또는 글꼴 크기에 따라 마커에 대해 동일한 양의 공간을 만든다는 것입니다. 따라서 공간을 직접 만들어서 자신의 손에 문제를 해결해야합니다. 여기서의 요령은 기본적으로 즉, 즉, Firefox가 다른 속성을 사용하여 공간을 생성한다는 것을 아는 것입니다. 즉 margin 에 <ol> (30 포인트) Firefox가 사용하는 동안 padding (40 픽셀)이므로 브라우저의 행복을 달성하기 위해이 두 가지 값을 모두 재설정해야합니다.

이 시도:

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}

Answer 2

이 시도:

li { 
  white-space:nowrap;
}

Answer 3

문제는 목록 스타일 위치 : 내부 "마커와 텍스트를 들여 쓰기"입니다. 그래서 당신은 당신이 그것을 사용하려는 것을 결코 달성하지 못할 것입니다. (http://www.w3schools.com/css/pr_list-style-position.asp) 그래서 당신은 단지 선택 일뿐입니다. 목록 스타일 위치 : 외부.

문제는 일부 목록이 최대 9 개의 항목 (1 자리)을 가질 수 있고, 다른 목록에는 최대 99 개의 항목 (2 자리)이 있고 다른 목록에는 최대 999 개의 항목 (3 자리) 등이 있습니다. 2 개의 선택 :

옵션 1 : 각 목록에 대해 다른 클래스를 만듭니다 (미리 카운트를 알고 있다고 가정). 어쩌면 Digits1, Digits2, Digits3 등이라고 부를 수도 있습니다. 따라서 1 자리 목록의 경우 다음을 사용합니다.

<ol class='digits1'>
  <li>item</li>
  ...
</ol>

옵션 2 : 포기는 모두 나열되어 테이블을 사용합니다 (나는 알고 있습니다). 그러나 목록에 몇 개의 항목이 있는지 상관없이 적절한 포장 및 계약을 보장합니다.

Answer 4

li { white-space: nowrap; }

이렇게하면 텍스트가 같은 줄에 표시 될 수 있습니다. 다른 것들이 수평으로 확장 될 수 있습니다.

li { overflow: hidden; }

이 경우 관련이 없지만 Li 요소의 고정 너비를 넘어 텍스트를 숨 깁니다.

또한 Break-Word를 참조하십시오.

li { word-wrap: break-word }

이 선택기는 IE에 몇 가지 문제가 있다고 생각합니다.