Html 我可以让文本在框外从下到上溢出吗？

我制作了一些30像素x 30像素的css框，并使用一侧的边框作为位置指示器。当我从框中溢出文本时，如3-5行，它会溢出到底部和右侧，没有问题。但是，我可能希望让文本从顶部溢出，这样颜色边界可能位于位置的底部

下面是一些css和一个方框示例

.box{
位置：绝对位置；
宽度：30px；
高度：30px；
z指数：5；
}
.rb{
右边框：蓝色实心10px；
右侧填充：12px；
文本对齐：右对齐；
}

1508V 1519D 1520D 1521D

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

您可以在这里使用.box上的宽度和高度-我刚刚出于示例目的对其进行了更新

这个解决方案将适用于所有现代浏览器，也适用于IE8和IE9

.box{
位置：相对；/*仅在需要时才相对或绝对位置*/
宽度：68px；/*需要框宽，但不需要高度*/
z指数：5；
}
.rb{
右侧填充：12px；
文本对齐：右对齐；
}
.rb：之后{
内容：“”；/*需要显示元素*/
背景：蓝色；/*您的边框颜色*/
宽度：10px；/*您所需的宽度*/
高度：50%；/*盒子高度的一半*/
位置：绝对；/*绝对位置*/
底部：0；/*位于底部的位置*/
右侧：0；/*右侧的位置*/
}

1508V 1519D 1520D 1521D

不直接使用

溢出

，但您可以使用flexbox模拟该行为

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

.box{
宽度：45px；
高度：30px；
边缘顶部：150px；
z指数：5；
显示器：flex；
弯曲方向：柱反向；
}
.rb{
边框：蓝色实心1px；
文本对齐：右对齐；
}

---

1508V 1519D 1520D 1521D

我想你误解了这个问题。这与蓝色部分的位置无关…这是关于文本溢出的。谢谢。看起来CSS并不是我想要的。但我认为这是解决问题的一种方法，但我必须为右BoarderBottom Box创建一个新类。将“.rbb”与“rbb:after”类似，因为已有太多的.rb框。我可能会使用各种背景图像，尽管这是我试图避免的。我还注意到，固定落潮高度：之后也可以。不需要是%但30px也很好匹配其他有颜色的边界边。再次感谢。没问题，很高兴我建议的解决方案帮助您小心使用display:flex；因为它在旧的web浏览器（如IE8和IE9）中不起作用。我不担心过时的浏览器，而且，顺便说一句，这是实现OP实际要求的唯一CSS方法。@Angel Politis-当你为一家网站点击率高达数百万的公司工作时，不幸的是，你必须支持多种浏览器，因为排除他们在经济上是不可行的。