多行内联块元素占用剩余宽度但不超过
Multi-line inline-block element to take remaining width but not more
我根据应用程序风格指南设置了假复选框。
<label>
<input type="checkbox" />
<span class="fake-checkbox"></span>
<span class="actual-label">
...
</span>
</label>
我将 SPAN 的输入和样式都隐藏为 inline-block。只要复选框标签足够窄以适合单行，这就很好用。当标签文本太长而无法容纳一行时，问题会变得很明显，在该行中它会换行，并在该行中单独保留复选框。
如果我设置 label { white-space: nowrap; } 和 .actual-label { white-space: normal; }，然后复选框和文本保持在同一行，实际标签文本确实分成多行，但它有 100% 的内容宽度而不是假的复选框。
我的复选框必须允许在同一行或同一列中放置多个复选框...就像常规复选框一样。这只是意味着排除了浮点数。
Flexbox 做到了
我可以通过使用 flexbox 实现我想要的，但不幸的是我需要支持没有 flexbox 的旧浏览器。
问题
我有什么方法可以使多行实际标签 span 占用所有剩余宽度并分成几行。我不能使用的东西：
- flexbox
- 浮动
我创建了 a Plnkr example，其中同一控件显示两次。首先是有问题的形式，其次是它应该显示的方式。第二个控件使用我无法使用的 flexbox 设置样式。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
white-space: nowrap;
font-size: 0;
}
label * {
white-space: normal;
font-size: initial;
}
label .fake-checkbox {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
vertical-align: top;
box-sizing: border-box;
}
label .fake-checkbox:before {
content: "";
display: inline-block;
}
label .actual-label {
display: inline-block;
vertical-align: top;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: flex-end;
align-items: flex-start;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
flex-shrink: 0;
flex-grow: 0;
display: block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
section .actual-label {
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
<br/>
<br/>
<section>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</section>
CSS 表
Support好回IE8
section {
display: table;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
display: table-cell;
display: block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
section .actual-label {
display: table-cell;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<section>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</section>
典型的浮动布局：
- 浮动输入
- 将以下元素显示为块
- 浮点数溢出并与块的边距框重叠
- 使块建立新的块格式化上下文以防止重叠。例如，
overflow: hidden.
你说你不能使用浮动，但它们在古老的浏览器上运行得很好。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
label .fake-checkbox {
float: left;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
label .actual-label {
display: block;
overflow: hidden;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
或者，由于复选框的宽度是已知的，您可以完全接受它 out-of-flow，并为标签添加一些边距。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
label .fake-checkbox {
position: absolute;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
box-sizing: border-box;
}
label .actual-label {
display: block;
min-height: 18px;
margin-left: 26px;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
我根据应用程序风格指南设置了假复选框。
<label>
<input type="checkbox" />
<span class="fake-checkbox"></span>
<span class="actual-label">
...
</span>
</label>
我将 SPAN 的输入和样式都隐藏为 inline-block。只要复选框标签足够窄以适合单行，这就很好用。当标签文本太长而无法容纳一行时，问题会变得很明显，在该行中它会换行，并在该行中单独保留复选框。
如果我设置 label { white-space: nowrap; } 和 .actual-label { white-space: normal; }，然后复选框和文本保持在同一行，实际标签文本确实分成多行，但它有 100% 的内容宽度而不是假的复选框。
我的复选框必须允许在同一行或同一列中放置多个复选框...就像常规复选框一样。这只是意味着排除了浮点数。
Flexbox 做到了
我可以通过使用 flexbox 实现我想要的，但不幸的是我需要支持没有 flexbox 的旧浏览器。
问题
我有什么方法可以使多行实际标签 span 占用所有剩余宽度并分成几行。我不能使用的东西：
- flexbox
- 浮动
我创建了 a Plnkr example，其中同一控件显示两次。首先是有问题的形式，其次是它应该显示的方式。第二个控件使用我无法使用的 flexbox 设置样式。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
white-space: nowrap;
font-size: 0;
}
label * {
white-space: normal;
font-size: initial;
}
label .fake-checkbox {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
vertical-align: top;
box-sizing: border-box;
}
label .fake-checkbox:before {
content: "";
display: inline-block;
}
label .actual-label {
display: inline-block;
vertical-align: top;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: flex-end;
align-items: flex-start;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
flex-shrink: 0;
flex-grow: 0;
display: block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
section .actual-label {
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
<br/>
<br/>
<section>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</section>
CSS 表
Support好回IE8
section {
display: table;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
display: table-cell;
display: block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
section .actual-label {
display: table-cell;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<section>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</section>
典型的浮动布局：
- 浮动输入
- 将以下元素显示为块
- 浮点数溢出并与块的边距框重叠
- 使块建立新的块格式化上下文以防止重叠。例如，
overflow: hidden.
你说你不能使用浮动，但它们在古老的浏览器上运行得很好。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
label .fake-checkbox {
float: left;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
label .actual-label {
display: block;
overflow: hidden;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
或者，由于复选框的宽度是已知的，您可以完全接受它 out-of-flow，并为标签添加一些边距。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
label .fake-checkbox {
position: absolute;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
box-sizing: border-box;
}
label .actual-label {
display: block;
min-height: 18px;
margin-left: 26px;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>