当使用 kineticjs 时，我如何使用 overflow:hidden 模拟具有指定高度和宽度的 div 框的行为，当文本超出 div 框的高度时，剩余的文本是隐藏的。
参见 http://jsfiddle.net/8t9QV/ ，当我的高度设置为1时，第一行“复杂文本”仍然显示？!
kinetic.Text 中高度和宽度的行为是什么？
最佳答案
您可以将您的文本放在 Kinetic.Group 容器中，然后设置该组的 clip 属性以防止您的文本溢出组外:
这是代码和 fiddle :http://jsfiddle.net/m1erickson/M5m8P/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group({
width:100,
height:50,
clip:[0,0,100,50]
});
layer.add(group);
var rect= new Kinetic.Rect({
x:0,
y:0,
width:group.getWidth(),
height:group.getHeight(),
fill:"skyblue"
});
group.add(rect);
var text = new Kinetic.Text({
x:5,
y:20,
text:"Rudolph the Red Nosed Reindeer...",
fill: 'red',
});
group.add(text);
layer.draw();
$("#myButton").click(function(){});
}); // end $(function(){});
</script>
</head>
<body>
<button id="myButton">Button</button>
<div id="container"></div>
</body>
</html>
关于javascript - kineticjs 文本溢出行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20625749/