• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • text-size-adjust

    版本:CSS3

    text-size-adjust CSS 控制将一些手机或平板设备上使用的文本溢出算法(text inflation algorithm)。其他类型的设备上的浏览器会忽略此属性。

    这是一个实验中的功能。此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

    示例

    /* 专有属性值 */
    text-size-adjust: none;
    text-size-adjust: auto;
    
    /*  值 */
    text-size-adjust: 80%;
    
    /* 全局属性值 */
    text-size-adjust: inherit;
    text-size-adjust: initial;
    text-size-adjust: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    仅仅chrmoe、oprear浏览器支持text-size-adjust,其余浏览器都不支持text-size-adjust

    语法:

    text-size-adjust:auto| none| <percentage>

    取值:

    • auto:文本大小根据设备尺寸进行调整。启用浏览器的文本溢出算法。该值一般用于取消先前使用 CSS 设置的 none。
    • none:文本大小不会根据设备尺寸进行调整。禁用浏览器的文本溢出算法。
    • <percentage>:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。启用浏览器的文本溢出算法,并使用用一个百分数来确定文本放大程度。

    说明:

    检索或设置移动端页面中对象文本的大小调整。

    • 该属性只在移动设备上生效;
    • 如果你的页面没有定义metaviewport,此属性定义将无效;
    • 对应的脚本特性为textSizeAdjust

    因为许多网站还没有适配屏幕较小的设备,移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页,而是用比屏幕宽一些的视窗去布局网页,通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上,手机浏览器要么只渲染整个页面的一部分,要么将视窗缩放至原始屏幕大小。

    因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法放大文本,改善可读性。当一个包含文本的元素使用了 100%的屏幕宽度,该算法会增加文本大小,但是不会修改布局。text-size-adjust这个属性允许开发者去除或者修改浏览器的这种行为,比如,当网页已经适配了小屏幕之后,就不需要这么做了。

    注意:

    • 这个属性并不是标准。你必须为每个你想要应用的浏览器加上属性前缀。
    • 不同浏览器,这个属性有不同的行为和语法
    • 这个属性只在一些智能手机和平板电脑上使用。桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。
    • 如果-webkit-text-size-adjust显式设置为none,老的基于桌面的 WebKit 和平板电脑浏览器,像 Chrome≤26 或者 Safari≤5,不会忽略这个属性,反而会阻止用户在 web 界面放大或缩小。
    • 不是所有的浏览器都支持这个属性使用百分比值(例如 Webkit 和 Trident ,但是 Gecko不支持).检查下面浏览器兼容的部分查看更多的信息。
    默认值auto
    适用于所有元素
    继承性
    动画性当取值为<percentage>
    计算值指定值

    实例

    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <style>
    .demo2{-webkit-text-size-adjust:auto;}
    </style>
    </head>
    <body>
    	<div class="demo1">
    		<p>请在移动设备上查看本例,设备尺寸的变化将会使得文本大小变化</p>
    	</div>
    </body>
    </html>
    

    上篇:line-height

    下篇:text-overflow