Html CSS - 使 SPAN 延伸到其容器的末端/填充空白空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11952852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Make SPAN extend to end of its container / fill empty space?
提问by Devin
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
我有一个网站的以下 HTML 布局（由网络解决方案 nsCommerceSpace 提供支持）我正在为其设计一个主题：
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span><a href="/">[Name of Webstore]</a></span>
<span> > </span>
<span><a href="/page.aspx">Page</a></span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span>in them are automatically generated to separate each item.
其中的 span 标签<span> > </span>会自动生成以分隔每个项目。
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
这是我的问题的小提琴：http: //jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden;to hide the extra text.
有没有办法让最后一个 SPAN 标签填充空白空间，并在它碰到右侧时结束？我只是overflow: hidden;用来隐藏额外的文本。
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
有任何想法吗？我知道拥有所有 SPAN 会使这变得困难，但它是我无法更改的站点的内置功能。
回答by Marcelo De Polli
I think I found a pure CSS solution. You only missed two things:
我想我找到了一个纯 CSS 解决方案。你只错过了两件事：
- You have to use only
display: inline-blockin the<span>tags withoutfloat: left, because floating is actually contradictory with inline-block elements. - You have to use
white-space: nowrapin the parent<div>.
- 你必须只
display: inline-block在<span>没有的标签中使用float: left，因为浮动实际上与内联块元素是矛盾的。 - 您必须
white-space: nowrap在父级中使用<div>。
This way you don't need to specify a width for anything. :)
这样你就不需要为任何东西指定宽度。:)
JSFiddle demo
JSFiddle 演示
CSS
CSS
(I cleaned it up a little bit)
（我稍微清理了一下）
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
回答by jday
This span class did the trick for me...
这个跨度课程对我有用......
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
基本上是这样使用的...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
回答by Hidde
Two different kind of answers, both not great:
两种不同的答案，都不是很好：
http://jsfiddle.net/5fvmJ/14/: Set a
max-widthfor the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.Without any width changing, get the text dimensions, and only display the substring with
...appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
http://jsfiddle.net/5fvmJ/14/：
max-width为最后一个跨度设置 a ，以确保背景不会跳跃。然后，您应该确保文本不会脱落。不更改任何宽度，获取文本尺寸，并仅显示
...附加的子字符串，该子字符串保留在栏中：http: //jsfiddle.net/5fvmJ/19/。你应该动态地做到这一点。（使用 JavaScript 计算文本宽度）
回答by aeternus828
Try styling the span with display:blockEX:
尝试使用display:blockEX对 span 进行样式设置：
<span style="display:block"> Here is a... </span>
<span style="display:block"> Here is a... </span>
回答by paolo
You don't need to specify the width. Simply add 'display:block; float:none;' to the css class. Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.
您不需要指定宽度。只需添加 'display:block; 浮动：无；' 到 css 类。如果您不喜欢从新行开始的超出文本，可选择添加“溢出：隐藏”。
