跨度在 h2 标签中。自动调整宽度答案

【问题标题】：Span in h2 tag. Auto adjust width跨度在 h2 标签中。自动调整宽度
【发布时间】：2013-11-19 11:46:11
【问题描述】：

这是 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/

【问题讨论】：

注意：你的 div 类是 conatiner，但在你的 CSS 中你使用 .container（注意错字）。
呃，这只是一个错字。我的意思是它在实际代码中是正确的。
display:inline-block 我相信会做到的！

标签： css html adjustment

【解决方案1】：

使用柔性显示可以实现这一点。容器显示应该是 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/

【讨论】：

请解释一下，你做了什么。

【解决方案2】：

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

Fluid width div relative to sibling

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

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

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

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

希望有帮助！

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，但我正在寻找跨浏览器解决方案。
那么<table> 是所有可能的

【解决方案4】：

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

或display: inline-block和text-align: rightspan

【讨论】：

如果我删除宽度，它根本不会显示，因为我猜里面没有文字。您的第二个解决方案也没有帮助。
给它一个min-width
我在帖子中添加了小提琴。希望您能看看并测试您的解决方案。
直到你的 jsFiddle 我才完全理解。这是你要找的吗？ jsfiddle.net/SCj5Z/12
是的，但我必须使用当前的 CSS 结构。我的意思是我不能删除 span CSS。加上红线高度应为 34 像素。

【解决方案5】：

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

【讨论】：