[英]Prevent list item text wrapping under item when using :before to increment counter with sub lists
I have a simple ordered list that has some list items and within those may be a sub list.我有一个简单的有序列表,其中包含一些列表项,其中可能是一个子列表。 I want to increment the number of the list item to the child / sub ordered lists so the layout is like so:
我想将列表项的数量增加到子/子有序列表,因此布局如下:
1. Blah blah blah
2. Yeah yeah yeah
3. Jadda jadda jadda
3.1 Sub jadda
3.2 Sub Jadda
This isn't so hard to do, my code does this (have a look at the code snippet)...这并不难做到,我的代码就是这样做的(看看代码片段)...
.container { background-color: #c7e8f7; border: 1px solid #00bcd4; width:800px; padding: 5px; } ol { counter-reset: item; list-style-type: none; padding-left: 0px; } li:before { content: counters(item, ".") "."; counter-increment: item; } /* Add an indent to the sub ol*/ ol ol { padding-left: 10px; }
<div class="container"> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li> here is some text... <ol> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> </ol> </li> </ol> </div>
Now the problem is that my text wraps under the list item number, I don't want this, I want the number to have a column (like it would be if I wasn't using the :before
to set the increment number).现在的问题是我的文本在列表项编号下换行,我不想要这个,我希望编号有一个列(就像我没有使用
:before
来设置增量编号一样)。 My uploaded image shows how the content wraps below the number.我上传的图片显示了内容如何在数字下方换行。 Does anyone know of a way without modifying the HTML structure (CSS only) to prevent the wrap?
有没有人知道不修改 HTML 结构(仅限 CSS)来防止换行的方法?
Please note, if I haven't described my problem clearly please say so and I shall reword the question - many thanks.请注意,如果我没有清楚地描述我的问题,请说出来,我会改写这个问题 - 非常感谢。
This can be done by making use of display: table
property on the list.这可以通过使用列表中的
display: table
属性来完成。 Then apply display: table-cell
on li:before
in order to provide indent on the second line and so on.然后在
li:before
上应用display: table-cell
以在第二行提供缩进,依此类推。 display: table-row
on li
in order to have li
text in the same row as the table-cell
. display: table-row
on li
以使li
文本与table-cell
位于同一行。
Additions to CSS对 CSS 的补充
ol{
display: table;
}
li:before {
display: table-cell;
}
li {
display: table-row;
// Add spacing to left as per requirement.
}
SNIPPET片段
.container { background-color: #c7e8f7; border: 1px solid #00bcd4; width: 800px; padding: 5px; } ol { counter-reset: item; list-style-type: none; padding-left: 0px; display: table; } li { display: table-row; } li:before { content: counters(item, ".") "."; counter-increment: item; display: table-cell; } /* Add an indent to the sub ol*/ ol ol { padding-left: 10px; }
<div class="container"> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li> here is some text... <ol> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> </ol> </li> </ol> </div>
One approach is to provide a specific padding to the left of the <li>
elements, and then position the generated ::before
pseudo-element in that space:一种方法是在
<li>
元素的左侧提供特定的填充,然后将生成的::before
伪元素放置在该空间中:
/* This block is just to remove default padding
and margin, and also to more easily assign
width/height to elements: */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #c7e8f7;
border: 1px solid #00bcd4;
width: 800px;
padding: 5px;
}
ol {
counter-reset: item;
list-style-type: none;
}
li {
/* padding the left of the <li>
elements with 2em of 'empty space': */
padding-left: 2em;
/* setting the position to a non-'static'
value, in order to position the
pseudo-elements in relation to their
closest <li>: */
position: relative;
}
li:before {
content: counters(item, ".")".";
counter-increment: item;
/* absolute positioning to remove the
pseudo-element from the document
flow, and to explicitly move them
to the left-most edge: */
position: absolute;
left: 0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #c7e8f7; border: 1px solid #00bcd4; width: 800px; padding: 5px; } ol { counter-reset: item; list-style-type: none; padding-left: 0px; } li { padding-left: 2em; position: relative; } li:before { content: counters(item, ".")"."; counter-increment: item; position: absolute; left: 0; }
<div class="container"> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li> <li>here is some text... <ol> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> <li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li> </ol> </li> </ol> </div>
The main problem with this approach, of course, is the arbitrary means of assigning the 'column'-width of the pseudo-elements, depending on how involved your list gets it's potentially possible to get to a state where 2em
isn't sufficient to contain the list-item number of 1.4.2.4.baiii
;当然,这种方法的主要问题是分配伪元素的“列”宽度的任意方法,这取决于您的列表的参与程度,有可能达到
2em
不足以包含1.4.2.4.baiii
的列表项编号; so this may be a fragile solution.所以这可能是一个脆弱的解决方案。 Although you could, explicitly style those elements with:
尽管您可以使用以下方式显式设置这些元素的样式:
li li li li li li li::before {
position: static;
display: block;
}
To place the counter above the content of those elements (or do whatever else might better suit your design constraints).将计数器放在这些元素的内容上方(或做任何其他可能更适合您的设计约束的事情)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.