13

I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:

<div id="ctl00_breadcrumb" class="breadcrumb">
   <span id="ctl00_breadcrumbContent">
      <span><a href="/">[Name of Webstore]</a></span>
      <span>&nbsp;&gt;&nbsp;</span>
      <span><a href="/page.aspx">Page</a></span>
      <span>&nbsp;&gt;&nbsp;</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>&nbsp;&gt;&nbsp;</span> in them are automatically generated to separate each item.

Here is a Fiddle of my problem: 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.

Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.

4

5 回答 5

14

我想我找到了一个纯 CSS 解决方案。你只错过了两件事：

  • 您只能display: inline-block在<span>没有 的标签中使用float: left，因为浮动实际上与 inline-block 元素相矛盾。
  • 你必须white-space: nowrap在 parent中使用<div>。

这样你就不需要为任何东西指定宽度。:)

JSFiddle 演示

http://jsfiddle.net/yz9TK/

CSS

（我稍微清理了一下）

@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;
}
于 2012-08-14T14:16:02.093 回答
8

这个跨度类为我做了诀窍......

span.empty_fill {
    display:block;
    overflow:hidden;
    width:100%;
    height:100%;
}

基本上是这样使用的...

<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
于 2012-12-20T17:50:00.463 回答
1

Two different kind of answers, both not great:

  1. http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.

  2. 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)

于 2012-08-14T13:19:21.333 回答
1

Try styling the span with display:block EX:

<span style="display:block"> Here is a... </span>

于 2012-08-14T13:20:26.003 回答
1

您无需指定宽度。只需添加 'display:block; 浮动：无；' 到 CSS 类。如果您不喜欢从新行开始的超出文本，可以选择添加“溢出：隐藏”。

于 2013-04-17T10:36:50.517 回答