<p>
<span> Foo </span><span> Bar </span>
</p>
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
<p>
<span>Foo</span><span>Bar</span>
</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
对于符合 CSS3 的浏览器,可以使用white-space-collapsing:discard
参见: http : //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
@font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
添加display: flex;
到父元素。这是带有前缀的解决方案:
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
简化版👇
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
基于CSS 文本模块第 3 级的另外两个选项(而不是从规范草案中删除的white-space-collapsing:discard
):
word-spacing: -100%;
从理论上讲,它应该完全满足需要 - 将 “单词” 之间的空格缩短 100%的空格字符宽度,即为零。但不幸的是,它似乎无法在任何地方使用,并且此功能被标记为 “有风险”(也可以从规范中删除)。
word-spacing: -1ch;
它通过数字 “0” 的宽度缩短了字间距。在等宽字体中,它应完全等于空格字符(以及其他任何字符)的宽度。它可以在 Firefox 10 +,Chrome 27 + 和 IE 9 + 中运行。
不幸的是,现在是 2019 年, white-space-collapse
仍然没有实现。
同时,给父元素font-size: 0;
并在子font-size
上设置font-size
。这应该可以解决问题
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}