Force span not to break line

I seem to know a little bit about the overflow problem mentioned in the previous article. This is probably the case: if you use the Float property, then the elements will be out of the text of the bondage, lawless, which is certainly intolerable to the ape class. To make them obedient, either clear the float or use the overflow attribute. This is a two-way solution and does not need to be used at the same time. But one thing to pay special attention to, Overflow:hidden this sentence must be written in the parent container to have the effect. Important thing to say three times: Parent container ~ ~ Parent Container ~ ~.

Okay, here we are. The problem to be solved today is to restrict the span label from wrapping and to make the excess part take the dot number instead.

Demand:

The implementation code is as follows:

1. HTML code

<Div>    <span class= "Spanstyle">Expense</span>    <span>80000000</span>    <span><imgsrc=".. /img/tip.png "></span></Div>

Of course, the font color style is dependent on demand, and is only related to line break settings here.

2. CSS Code

. Spanstyle{White-space:nowrap;/*force span not to break line*/Display:Inline-block;/*treat span as a block-level element*/width:32px;/*Limit width*/Overflow:Hidden;/*out of width section hidden*/Text-overflow:ellipsis;/*the excess part is replaced by the dot number*/Line-height:0.9;/*The numbers align with the previous text*/
}

At this point, the feature is implemented.

Now, then, let's get back to the logic of this matter. If you want span not to wrap, and to replace the content with a dot, you must have the corresponding code, beyond the length of the line, then this span will have a length! So to limit the width, but span does not eat this set, so to turn it into a block-level element (as for the use of inline-block or block depending on the situation, here my span is arranged after a picture, so I used the Inline-block). To do the thing is over, but found limited to block-level elements, the number and the previous text is not strong, so brainwave, adjusted the row height. I do not know if this is the mainstream, but it can be. Later found after the picture and the numbers are not aligned, adjust a piece of alignment can be. Picture alignment The default should be middle, and I'm aligning it to the bottom, which is the code:

Vertical-align:bottom;

  This problem is solved satisfactorily.

Force span not to break line