问题：当字体大小和div宽度都是固定的情况下，文字过长就会显示不下。
解决办法：通过css3属性tansform: scaleX()，让div横向压缩，呈现出来的就是字体变窄，然后通过调整定位使文字在固定宽度下完整显示。
实现：用两个div嵌套布，外层div写固定宽度，内层div宽度先自适应，然后用外层的宽度除以内层的宽度得出要缩放的比例，然后再让内层div偏移内层div缩放之前的宽度减去外层div宽度的一半。
文字挤压前：
文字挤压后：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.div1 {
width: 600px;
margin: 0 auto;
overflow: hidden;
}
.div2 {
font-size: 40px;
white-space: nowrap;
position: relative;
float: left;
}
</style>
</head>
<body>
<div id="div1" class="div1">
<div id="div2" class="div2">固定宽度当文字过长显示不下时，通过横向挤压不改变字体高度显示完整</div>
</div>
<script>
var div2 = document.getElementById('div2');
var myWidth = div2.clientWidth;
var proportion = 600 / myWidth;
var myLeft = (myWidth - 600) / 2;
div2.style.transform = 'scaleX(' + proportion + ')';
div2.style.left = '-' + myLeft + 'px';
</script>
</body>
</html>