文本更改空间线 [英] Text changes line on space

问题描述

我有一个列表，留下一些空格缩进的目的，也提供了虚线的底层。但是，用于此列表的显示属性不匹配，导致文本在找到空格时更改行。这是

所需结果：

解决方案

删除虚线类，并添加以下样式：

  li span：after {
 content：''; 
 position：absolute; 
 display：block; 
 width：90％; 
 margin-left：-12px; / * compensation padding-left：12px; * / 
 border-bottom：dashed 2px＃54687a; 
} 
  

小提示

I have a list, which leaves some spaces for indentation purposes and also provides dashed underlying. However the display properties used for this list do no match, causes the text to change line when a space is found. Here is a Fiddle.

The CSS:

.dashed {
    display: block;
    width: 100%;
    height: 90%;
    border-bottom: dashed 2px #54687a;
}
li {
    display: table-row;
}
li span {
    display: table-cell;
    padding-right: 1em;
}

I tried to keep only one display property, but that failed. Anyone has a fix for this please?

---

Let's speak with images!

What happens now - it's the problem:

Desired result:

解决方案

Remove the dashed class, and add these styles:

li span:after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  margin-left: -12px;               /* compensate for padding-left: 12px; */
  border-bottom: dashed 2px #54687a;
}

Fiddle

这篇关于文本更改空间线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！