Text changes line on space

Question

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:

Answer 1

UPDATED - Final css should be like

ul li span {
    background: url("../img/arrow.png") 0 50% no-repeat;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
    list-style-type: none;
    padding-left: 12px;
}
.dashed {
  border-bottom: 2px dashed #54687a;
  display: block;
  width: 58%;
  margin-bottom:10px;
}
li {
    display: table-row;
    padding-bottom:5px;
}
li span {
    display: inline-block;
    padding-right: 1em;
    width:23%;
}

Check the UPDATED demo - http://jsfiddle.net/cmfL2643/21/

Answer 2

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

Answer 3

I just updated your fiddle

I added in your CSS

ul li span {
    background: url("../img/arrow.png") 0 50% no-repeat;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
    list-style-type: none;
    padding-left: 12px;
    display: inline-block; // added or it can be inline
}

Answer 4

Are you trying to get it so that everything is in one line, like this?

Name: Charis Spiropoulos

If so, try this:

li span  {
    display: inline-block;
    padding-right: 1em;
}

Answer 5

You'll likely have better luck with display: block; on the list items and display: inline-block; on the span. table-cell is causing the line to wrap around.

li {
    display: display;
    padding: 10px 0px; /* modify as desired */
}
li span {
    width: 50px;    /* Set width as needed so the names line up, even if the span text is different lengths */
    display: inline-block;
    padding-right: 1em;
}

http://jsfiddle.net/daCrosby/cmfL2643/18/