CSS - 显示具有边框和文本溢出的内嵌块元素

我有一个inline-block元素，我想将border-bottom放在上面，但是当该元素内的文本换行到下一行时，它会将边框放在底部两行文本，而不仅仅是元素的底部。CSS - 显示具有边框和文本溢出的内嵌块元素

继承人演示：

而这里的相关SCSS：

div { 
    width: 150px; 
    text-align: center; 
    span { 
    border-bottom: 20px solid rgba(0,0,0,0.3); 
    } 
}

我如何得到它只是把边界上的元素的底部？

原因我不得不使用display: inline-block并不能只用display: block：

我需要文本能够换到一个新行，因为屏幕尺寸小
我不能在span指定一个定义的宽度，它需要基于文本是否能够适合于1个或多个行来改变宽度（取决于屏幕宽度）
跨度必须text-align: center股利

来源

2015-01-12 Joshua Soileau

这不是CSS语法。那是什么，少了还是sass？ – j08691

这是SCSS，我会更新问题的这一部分，谢谢。 –

在你的小提琴中，你不使用'display：inline-block'。如果你使用它，它会起作用。 [**演示**]（http://codepen.io/anon/pen/vEgojM）。 – Oriol

我改变了你对SCSS这一点，它为我工作得很好：

div { 
    width: 150px; 
    text-align: center; 
    span { 
    display: inline-block; 
    border-bottom: 20px solid rgba(0,0,0,0.3); 
    } 
}

只需添加display: inline-block;的跨度就像你说的。默认情况下，<span>元素是display: inline;而不是display: inline-block;。

来源

2015-01-12 20:05:21

3分钟前：“我改变了”--9分钟前：“在你的小提琴中，你不使用display：inline-block。如果你使用它，它工作，演示。“ ... – Christoph

@Cristoph是的，我们都得出了同样的结论。他是一个评论，我的回答是。无论哪种方式，它都有效，比Michael的答案简单得多。 –

内你可以用跨度在一个div并分配border-bottom到div。

添加一个包装DIV

<div> 
    <div class='wrap'> 
    <span> 
     This is a long sentence. 
    </span> 
    </div> 
</div>

分配border-bottom是SCSS

div { 
    background: rgba(0,0,0,0.1); 
    width: 150px; 
    margin: 100px auto; 
    padding: 20px; 

    text-align: center; 

    div { 
    padding: 0; 
    border-bottom: 20px solid rgba(0,0,0,0.3); 
    span { 

     font-size: 24px; 

    } 
    } 
}

这里是一个工作codepen。

来源

2015-01-12 19:58:43

CSS - 显示具有边框和文本溢出的内嵌块元素

回答

相关问题