Question

可能重复：
Letter Shadows from User Input

用户输入他们的名字，然后垂直打印两次。第二列应该像阴影一样。我试图压缩第二列中的字母（id = letters2）或限制它们之间的空格。有谁知道如何做到这一点。另外，请查看MZFirefox中的代码，因为旋转效果仅适用于该浏览器。

<html> 
<head> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script>  
<script type="text/javascript">   

function animate() {  

var txt = document.getElementById("words").value;
var area = txt;
var splittxt = txt.split("");

document.getElementById("letters").innerHTML = "";
document.getElementById("letters2").innerHTML = "";
var i;
for (i = 0; i < splittxt.length; i++) {
document.getElementById("letters").innerHTML = document.getElementById("letters").innerHTML + splittxt[i] + "<br>";
document.getElementById("letters2").innerHTML = document.getElementById("letters2").innerHTML + splittxt[i] + "<br>";
}
//displays how many symbols are in text box and what is in text box
document.getElementById("num").innerHTML= txt.length;          
document.getElementById("msg").innerHTML = txt;          

r.clear();      
// Make our pink rectangle 
ellipse = r.ellipse(40, 15, 30, 5).attr({"fill": "#969696", "stroke": "none"}); 
ellipse.glow({width:10});  
}      

</script>
<style type="text/css">
#letters
{
background-color:yellow;
width:25px;
float:left;
}

#letters2
{
letter-spacing:0px;
display:block;
-moz-transform: rotate(80deg);  
margin-left:90px;
margin-top:80px;
width:25px;
color:#DEDEDE;
}
</style>

</head> 

<body>  

Text: <input type="text" id="words" value="" /> 
<input type="button" value="Animate" onclick="animate()" /> 
<div id='msg'></div> 
<div id='num'></div>
<div id='letters'></div>
<div id="letters2"></div>
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;"> 
</div> 
<div id="elps" style="margin-left:100px;"/>  

<script type="text/javascript"> //all your javascript goes here  
var r = new Raphael("draw-here-raphael");  

</script>

</body> 
</html>

Live Long and Prosper。

Answer 1

您可以使用CSS line-height属性来更改字母之间的间距。

这是我之前制作的一个jsfiddle： jsfiddle.net/c7uDm

限制字母之间的空间

1 个答案: