CODEWITHSUNDEEP
htmlcss
Lion
Lion

Reputation: 121

Span not using half of the CSS?

I have a span that will display the profile name (steam name cannot set max limit myself)

I gave the span a max width, line height, normal height, world wrap but they all don't seem to work. Could someone help me?

p.raffleentry {
	width: 759px;
	height: 61px;
	font-size: 25;
	line-height: 61px;
	background-color: red;
}

span.profilename {
	font-weight: bold;
	height: 61px;
	line-height: 61px;
	max-width: 20px;
	word-wrap: break-word;
	background-color: orange;
}
<p class="raffleentry"><span class="profilename">12345678901234567890123456789012</span></p>

Upvotes: 1

Views: 289

Answers (2)

DigitalDan
DigitalDan

Reputation: 2637

Assuming you want the span to be no wider than 20px, this should work (i.e. use display: inline-block; and overflow: hidden;):

p.raffleentry {
	width: 759px;
	height: 61px;
	font-size: 25;
	line-height: 61px;
	background-color: red;
}

span.profilename {
	display: inline-block;
    overflow: hidden;
    font-weight: bold;
	height: 61px;
	line-height: 61px;
	max-width: 20px;
	background-color: orange;
}
<p class="raffleentry"><span class="profilename">12345678901234567890123456789012</span></p>

Upvotes: 1

maioman
maioman

Reputation: 18734

span by default displays inline, if you want to set width and height you'll need to convert that to display: inline-block

Upvotes: 3

Related Questions