Question

以下是HTML部分：

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

元素的CSS：

.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%;
}

我要做的是让跨度调整它的大小到文本长度。如果文本太长，使用此CSS，跨度会低于但它应该缩小。

以下是一个例子：

http://jsfiddle.net/SCj5Z/

Answer 1

使用flex显示，您可以实现此目的。容器显示应该是flex，span子属性可以是1（或基本上任何其他数字，因为我们没有任何其他flex子项）。使用flex我们设置跨度大小来填充空白区域，因为h2大小是固定的（这是文本的大小）跨度将填充所有空白区域。

您可以在此处阅读有关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/

Answer 2

我认为display: inline-block可以正常完成工作。

Answer 3

从width: 38%的CSS中移除span，宽度应为自动并自动调整。

或display: inline-block和text-align: right span

Answer 4

在Some text的末尾添加三个点。不是crossbrowser

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

Answer 5

这个问题听起来与这个问题类似：

Fluid width div relative to sibling

其中一个答案链接到以下JSFiddle：

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

如果您能够手动设置实际h2文本的背景颜色并在虚拟范围中包含 ，则以下小提琴可能对您有用：

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

希望有所帮助！

跨越h2标签。自动调整宽度

5 个答案: