css – 左右两侧溢出文本

前端之家收集整理的这篇文章主要介绍了css – 左右两侧溢出文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用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值.

margin:0 -100%会将div的原始大小的100%向左拉伸,100%再向右伸展,使其比.page div大3倍.文本宽度约为900px,因此如果.page div的宽度低于300px,此方法将停止工作(尝试使用jsFiddle调整浏览器的大小:0-100%以查看我的意思).

margin:0 -1000%拉伸div使其大21倍,这通常足以适合文本.

原文链接:https://www.f2er.com/css/242215.html

猜你在找的CSS相关文章