大佬教程收集整理的这篇文章主要介绍了css – 左右两侧溢出文本，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<body>
<div class="page">
SOMEHEADER
</div>
</body>
–
.page { overflow:hidden; width:70%; text-align:center; margin:0 auto; font-size:8em; word-wrap:none; }
这是一个fiddle,演示了我正在谈论的内容.
HTML：
<div class="page">
<div>
SOMEHEADER
</div>
</div>
CSS：
.page > div { margin: 0 -1000%; }
示例：http://jsfiddle.net/grc4/w36mX/
这种方法的工作原理是拉伸内部div,使其宽度足以完全适合其内容(不包裹/溢出).然后内容居中(text-align：center)并通过外部div(overflow：hidden)剪裁为大小.
棘手的部分是使内部div足够宽以适应文本.每当它不够宽时,文本将向右溢出,使其不能正确居中(如原始jsFiddle中所示).
通过使用negative margins,您可以将元素向左和向右拉伸一定量.如果你知道文本的大小是400px,那么你可以使用margin：0 -200px来确保内部div总是至少400px宽(左边200px,右边200pX).如果您不知道文本的确切大小,可以使用百分比或非常高的px值.
@H_106_4@margin：0 -100％会将div的原始大小的100％向左拉伸,100％再向右伸展,使其比.page div大3倍.文本宽度约为900px,因此如果.page div的宽度低于300px,此方法将停止工作(尝试使用jsFiddle调整浏览器的大小：0-100％以查看我的意思). @H_106_4@margin：0 -1000％拉伸div使其大21倍,这通常足以适合文本.以上是大佬教程为你收集整理的css – 左右两侧溢出文本全部内容，希望文章能够帮你解决css – 左右两侧溢出文本所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。