Question

我用30px×30px的css做了一些盒子，我用一边的边框作为位置的指示。当我从盒子中溢出文本时，如3-5行，它溢出到底部和右边没有问题。但是，我可能希望从顶部溢出文本，以便颜色边框可能位于该位置的底部。

以下是一些css和一个框示例

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

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

HTML中的

就像这个框一样，会与文本右上方的边框对齐，因为文本会在下面溢出。

例如，竖条表示文本溢出框的底部，边框位于右侧，文本顶部：

1508V |
1519D |
1520D 
1521D

所以我想知道我是否只能使相同的html结果出现，而文字溢出来自顶部。

基本上有这样的结果：

1508V 
1519D 
1520D |
1521D |

垂直条表示底部边界，因为文字溢出框顶部。

Answer 1

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

你可以在这里播放.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>

Answer 2

不直接使用overflow，但您可以使用flexbox来模仿行为。

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

＆＃13;

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

＆＃13;

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

＆＃13;

我可以在框外从底部向上溢出文字吗？

2 个答案: