这个问题通常是由于标签文字流动引起的。可以使用CSS属性white-space
和overflow-wrap
来解决这个问题。white-space
属性可以指定如何处理空白字符,overflow-wrap
属性可以指定是否允许在单词内断开换行。
下面是一个例子,展示如何使用这些属性:
HTML代码:
<
CSS代码:
.wrapper {
position: relative;
margin-bottom: 40px;
}
label {
display: block;
margin-bottom: 10px;
}
input {
width: 100%;
}
.line {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 2px solid #ccc;
}
添加以下CSS代码:
label {
white-space: pre-wrap;
word-wrap: break-word;
}
使用这些属性后,标签会自动换行,并且垂直线会随之移动。
注:如果你使用的是textarea
而不是input
元素,需要将CSS代码中的input
改为textarea
。
下一篇:标签画像系统