⽂字换⾏后是不和项⽬符号对齐的,因此需要加⼊底下这两⾏代码:
// (百度百科) em单位名称为相对长度单位。相对于当前对象内⽂本的字体尺⼨。
margin-left: 1.5em; // 距离根据你实际需求调整就⾏
text-indent: -1.5em; // 但是单位需要⽤em
<!-- HTML -->
<div class="text-overflow">
<p class="text-item">1、这是⼀段⽂字⼀段⽂字⼀段⽂字</p>
<p class="text-item">2、这是⼀段⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字</p> <p class="text-item">3、这是⼀段⽂字⼀段⽂字⼀段⽂字</p>
<p class="text-item">4、这是⼀段⽂字⼀段⽂字⼀段⽂字</p>
</div>
<div class="ul-text-wrap">
<ul class="ul-text">
<li>这是⼀段⽂字⼀段⽂字⼀段⽂字</li>
<li>这是⼀段⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字⽂字</li>
<li>这是⼀段⽂字⼀段⽂字⼀段⽂字</li>
<li>这是⼀段⽂字⼀段⽂字⼀段⽂字</li>
</ul>
</div>
// CSS
.text-overflow {
padding: 24px 12px;
width: 500px;
background-color: #f2f2f2;
box-sizing: border-box;
}
.text-item {
margin-left: 1.5em;
text-indent: -1.5em;
}
.ul-text-wrap {
padding: 24px 12px;
width: 500px;
background-color: #f2f2f2; box-sizing: border-box;
}
.ul-text li {
box sizingmargin: 16px 0;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论