CODEWITHSUNDEEP
htmlcss
user2953119
user2953119

Reputation:

Span's element content doesn't display entirely

Consider the following example from jsFiddle. 

<span>This is a very long text's line which containts in a span element. This is a very long text's line which containts in a span element. This is a very long text's line which containts in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which containts in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element.</span>

CSS styles:

span {
    background-color: aqua;
    padding:100px;
    text-align: center;
    margin: 5px;
}

Why the text which contains in the span element is overlapping by the background and doesn't display entirely?

Upvotes: 1

Views: 204

Answers (2)

Deepak Ingole
Deepak Ingole

Reputation: 15742

Inline formatting contexts

Basically margin, padding and border can be set on inline-level elements, but they may not behave as you expect. The behavior will probably be OK if there's only one line, but other lines in the same flow will likely exhibit behavior different from your expectations (i.e. padding will not be respected). In addition, your inline box can be broken if it contains breakable elements and reaches the margin of the containing element; in that case, at the point of break, margins and padding will not be respected as well.

I think you are looking for word-spacing,

span {
    background-color: aqua;
    word-spacing:1px;
    text-align: center;
}

For information:

Inline elements and padding / margin

While padding / margin can be applied to all sides of an inline element, only left and right padding margin will have an effect on surrounding content.

Upvotes: 0

PatomaS
PatomaS

Reputation: 1603

You have too much padding and a short width even if you apply a display: block;

Upvotes: 1

Related Questions