Прекратить перенос текста в списках - PullRequest
Новая
       17

Прекратить перенос текста в списках

3 голосов
/ 24 марта 2009

У меня есть заказанный список: 

<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. Однако это имело некоторые побочные эффекты, когда у меня были двузначные и тройные цифры. Я должен был использовать эти поля, так как в IE цифры были обрезаны. Я хотел бы иметь возможность вернуться к использованию list-style-position из inside и удалить поля, но текст переносится под номером, который не тот, который я хочу.

Кто-нибудь знает, как отключить эту упаковку?

Ответы [ 4 ]

3 голосов
/ 24 марта 2009

Использование list-style-position:outside; было бы более выполнимо, если бы вы использовали неупорядоченный список, который всегда занимал бы одинаковое количество места для маркера. Поскольку вы используете упорядоченный список, я бы придерживался list-style-position:inside;. Проблема, как вы обнаружили, заключается в том, что IE и Firefox занимают одинаковое количество места для маркера независимо от количества цифр в маркере или размера шрифта. Таким образом, вы должны взять дело в свои руки, создав пространство самостоятельно. Хитрость заключается в том, что по умолчанию IE и Firefox используют разные свойства для создания пространства. IE использует margin на <ol> (30 баллов), в то время как Firefox использует padding (40 пикселей), поэтому вам придется сбросить оба этих значения, чтобы достичь счастья в разных браузерах.

Попробуйте это: 

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}
3 голосов
/ 24 марта 2009

Попробуйте это: 

li { 
  white-space:nowrap;
}
2 голосов
/ 24 марта 2009

Проблема в том, что list-style-position: внутри "Отступы для маркера и текста". Таким образом, вы никогда не достигнете того, что пытаетесь сделать, используя это. (http://www.w3schools.com/CSS/pr_list-style-position.asp) Таким образом, вы выбираете только позицию списка в стиле: снаружи.

Если ваша проблема в том, что в некоторых списках может быть до 9 элементов (1 цифра), в других - до 99 элементов (2 цифры), а в других - до 999 элементов (3 цифры) и т. Д. что у вас есть 2 варианта:

Вариант 1: создать разные классы для каждого списка (при условии, что вы знаете количество заранее). Возможно, называйте их цифрами 1, цифрами 2, цифрами 3 и т. Д. Поэтому для списков из 1 цифры вы должны использовать: 

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

Вариант 2: отказаться от списков в целом и просто использовать таблицы (я знаю, тьфу). Но вы гарантируете правильную упаковку и отступы независимо от того, сколько элементов в списке.

1 голос
/ 24 марта 2009 
li { white-space: nowrap; }

Это позволит тексту отображаться в одной строке. Это может привести к горизонтальному расширению других объектов. 

li { overflow: hidden; }

Вероятно, не имеет значения в этом случае, но он будет скрывать любой текст за фиксированной шириной элемента LI.

Также см. Ключевое слово: 

li { word-wrap: break-word }

Я думаю, что у этого селектора есть некоторые проблемы в IE.

...