css控制多行文本的下划线距离
css自带的下划线样式
在css中可以使用自带的样式text-decoration: underline;
来对文本添加下划线,但是这样的下划线往往并不美观,因为下划线和文本靠的太近,如果字号太小,甚至影响阅读。
加边框式下划线
在css中让一个块的边框来模拟下划线,可以较好的控制下滑线的距离,代码如下:
border-bottom: solid 1px #000;
padding: 5px;
但是这有个问题就是一个块只能有一个下划线,这对于一个文本域来说并不是很方便。
文本域多行文本加下划线
如果要让一段文本都有下划线且是可控的下滑线,那么可以使用如下方法:
display: inline;
border-bottom: solid 1px #000;
padding-bottom: .1rem;
或者使用<span>
之类的行级元素标签,两种方法的效果是一样的,只要让这段字变成行级元素就可以了。