Two same span elements but have different width
Question
I create two span elements and add them to DOM with visibility = hidden. After adding both span element to DOM, I get width and height of both elements.
Surprisingly, both width and height are different.
text, font-size, font-family all are same in both span. What could be the reason for difference in size?
var sp1 = goog.dom.createDom('span', null);
sp1.innerText = text;
sp1.style.fontSize = "60px";
sp1.style.fontFamily = family;
sp1.style.visibility = "hidden";
goog.dom.appendChild(document.body, sp1);
var sp2 = goog.dom.createDom('span', null);
sp2.innerText = text;
sp2.style.fontSize = "60px";
sp2.style.fontFamily = family;
sp2.style.visibility = "hidden";
goog.dom.appendChild(document.body, sp2);
var sz1 = goog.style.getSize(sp1);
var sz2 = goog.style.getSize(sp2);
assert(sz1 == sz2)
HTML of page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="ff.css">
<style>
#id3{
/*font-family: abracadabra, Orator W01 Slanted, Alpha Jazz W00 Regular;*/
font-family: abracadabra, Orator W01 Slanted;
}
#id4{
font-family: Alpha Jazz W00 Regular, Orator W01 Slanted, Times New Roman, sans-serif;
}
</style>
<title>Web Fonts</title>
</head>
<body>
<div id="id1">1. Quick Brown Fox Jumps over the Lazy Dog</div>
<div id="id2">2. Quick Brown Fox Jumps over the Lazy Dog</div>
<div id="id3">3. Quick Brown Fox Jumps over the Lazy Dog</div>
<div id="id4">4. Quick Brown Fox Jumps over the Lazy Dog</div>
<div id="test1" style="position: absolute; top: 0px; z-index: 2; width: auto; right: 0px; background-color: rgb(255, 0, 0); display: none;">
<div style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(8, 12, 18); padding: 10px 5px;">
<div style="float: left; background-image: url(logo.png); padding-left: 25px; color: rgb(0, 0, 0); font-size: 18px; background-position: 0% 50%; background-repeat: no-repeat no-repeat;">test</div>
<div style="float: right;"><img src="logo.png" style="margin: 0px;"></div>
<div class="clear"></div>
</div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</div>
<span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span>
<span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span>
</body>
</html>
The span in questions are the two span at end of html document.
Size of 1st = (1217, 67)
Size of second = (1267, 136)
2 answers
solution1
1 2013-09-10 12:07:28
如果它们在不同大小的元素旁边（例如，在div旁边而不是在自己的单独行上），则它们的大小将不同，因为它们是内联元素而不是块级元素。
solution2
1 ACCPTED 2013-09-10 14:45:19
Thanks for the HTML. Consider this: the font-size you have set for those spans is quite big, and when the window is not wide enough the text inside the spans starts to wrap. Spans have display:inline; by default and when wrapped the two text will appear as one BUT with different wrapping, because the second continues immediately after the first and its text is most probably broken on a different place. If you set display:block; for those spans there should be no difference.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.