我可以让文本从盒子底部向上溢出吗？

我用cpx制作了一些30px×30px的盒子，我使用一边的边框作为位置的指示器。当我从盒子中溢出文本时，如3-5行，它溢出到底部，没有问题。但是，我可能希望将文本从顶部溢出，以便颜色边界可能位于该位置的底部。我可以让文本从盒子底部向上溢出吗？

下面是一些CSS和一箱例如

.box { 
 
\t position:absolute; 
 
\t width:30px; 
 
\t height:30px; 
 
\t z-index:5; 
 
    } 
 
    .rb{ 
 
\t border-right:blue solid 10px; 
 
\t padding-right:12px; 
 
\t text-align:right; 
 
    }

<html> 
 
    <head> 
 
</head> 
 
<body> 
 
    <div id="box-i2" class="box rb">1508V 1519D 1520D 1521D</div> 
 
</body> 
 
</html>

在HTML

这样的对话框，并在文本的右上角边境被右对齐，因为下面文本溢出。

例如，竖线表示文本溢出箱子的底部，边境是在右边，在文本的顶部：

所以我想知道如果我只能反而让顶部文字溢出来的同一个html结果出来。

本质上具有像这样的结果：

凡竖线表示有底边界为文本溢出箱的顶部。

来源

2016-07-05 ndasusers

在这种情况下，最好使用伪后元素，请参阅下面的代码示例。

你可以在这里玩.box的宽度和高度 - 我刚刚更新了它的例子。

该解决方案将适用于所有现代浏览器，并且还可以在IE8和IE9中工作。

.box { 
 
    position:relative; /* position relative, or absolute only if required */ 
 
    width: 68px; /* box width required, but not height */ 
 
    z-index:5; 
 
} 
 
.rb{ 
 
    padding-right: 12px; 
 
    text-align:right; 
 
} 
 
.rb:after { 
 
    content: ''; /* required to display element */ 
 
    background: blue;/* your border color */ 
 
    width: 10px; /* your desired width */ 
 
    height: 50%; /* half the .box height */ 
 
    position: absolute; /* absolute position */ 
 
    bottom: 0; /* position at the bottom */ 
 
    right: 0; /* position on the right */ 
 
}

<html> 
 
    <head> 
 
</head> 
 
<body> 
 
    <div id="box-i2" class="box rb">1508V 1519D 1520D 1521D</div> 
 
</body> 
 
</html>

来源

2016-07-05 15:19:52 mattpark22

我想你误解了这个问题。这与蓝色部分的位置无关......这与文本溢出有关。 –

谢谢你。它看起来像CSS不只是做我想要的。但我认为这是解决问题的方法之一，但是病态人士必须为rightboarderbottom框创建一个新类。像'.rbb'和'rbb：after'一样，因为已经有太多的.rb盒子了。我可能会使用各种背景图片，尽管这是我想要避免的。 – ndasusers

我也注意到固定衰退的高度：以后也好。不需要是％，但30px也很好，与其他有颜色的边框边相匹配。再次感谢。 – ndasusers

不能直接使用overflow但你可以使用Flexbox的模仿行为。

但请注意，溢出的文本不会影响主容器的位置。您必须在容器上方留出足够的空间（边距）才能显示。

.box { 
 
    width: 45px; 
 
    height: 30px; 
 
    margin-top: 150px; 
 
    z-index: 5; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
} 
 
.rb { 
 
    border: blue solid 1px; 
 
    text-align: right; 
 
}

<div id="box-i2" class="box rb">1508V 1519D 1520D 1521D</div>

来源

2016-07-05 15:21:13

使用显示器时要小心：flex;因为它不适用于IE8和IE9等较早的Web浏览器。 – mattpark22

我不担心过时的浏览器和AFAIK，这是唯一的CSS方法来实现OP实际**请求的内容。 –

@Angel Politis - 当你为一家获得数百万网站点击量的公司工作时，你不得不支持各种浏览器，因为它在财务上不可排除它们。 – mattpark22

我可以让文本从盒子底部向上溢出吗？

回答

相关问题