0

Here is the HTML part:

<div class="container">
    <h2>Some text<span></span></h2>
</div>

CSS for the elements:

.container {
width: 533px;
}

.container h2 {
color: #ec1c24;
font-size: 48px;
text-transform: uppercase;
font-family: "Open Sans Extrabold";
letter-spacing: -3px;
}

.container h2 span {
background: none repeat scroll 0 0 #ec1c24;
float: right;
height: 34px;
margin-top: 16px;
width: 38%;
}

What I'm trying to do is to make the span adjust it's size to the text lenght. With this CSS if the text is too long, the span goes below but it should just shrink.

Here's an example:

http://jsfiddle.net/SCj5Z/

4

5 回答 5

1

使用 flex display 可以实现这一点。容器显示应该是 flex 并且 span 子属性可以是 1（或者基本上是任何其他数字，因为我们没有任何其他 flex 子项）。使用 flex 我们设置 span 大小以填充空白空间，因为 h2 大小是固定的（这是文本的大小），span 将填充所有空白空间。

您可以在此处阅读有关 flexbox 的更多信息： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这有帮助..

HTML：

<div class="container">
    <h2>Some text<span></span></h2>
</div>

CSS：

.container {
     width: 533px;
}

.container h2 {
    display: flex;
    align-items: center;
}
.container h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 3px solid #2B3F4F;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 4px;
}

http://jsfiddle.net/besatzardosht/SCj5Z/75/

于 2016-11-23T15:39:09.647 回答
0

这个问题听起来类似于这个 SO 问题：

相对于兄弟的流体宽度 div

答案之一链接到以下 JSFiddle：

http://jsfiddle.net/pQc3d/1/

如果您有能力手动设置实际h2文本的背景颜色并包含&nbsp;在虚拟跨度中，则以下小提琴可能适合您：

http://jsfiddle.net/doubleswirve/3QFgk/

希望有帮助！

于 2013-11-07T18:06:56.573 回答
0

在末尾添加三个点Some text。不是跨浏览器

       .container {                           
       width: 533px;                          
       }                                      

       .container h2 {                        
       color: #ec1c24;                        
       font-size: 48px;                       
       text-transform: uppercase;             
       overflow-x:hidden;                     
       white-space: nowrap;                   
       text-overflow: ellipsis;               
       font-family: "Open Sans Extrabold";    
       letter-spacing: -3px;                  
       }                                      

       .container h2 span {                   
       background: none repeat scroll 0 0 #ec1
       float: right;                          
       height: 34px;                          
       margin-top: 16px;                      
       width: 38%;                            
       }                                      


       <div class="container">                
           <h2>Some text<br><span></span></h2>
       </div>
于 2013-11-07T17:52:47.670 回答
0

我认为display: inline-block会正确地完成工作。

于 2013-11-07T17:32:28.223 回答
0

width: 38%从's CSS中删除，span宽度应该只是自动并自动调整。

或者display: inline-block和text-align: right_span

于 2013-11-07T17:33:29.113 回答