如何用css控制文本自动换行 ？

html-css018

如何用css控制文本自动换行 ？,第1张

分类: 电脑/网络 >>互联网

问题描述:

如何用css控制文本自动换行 ？

解析:

默认的就是自动换行

语法：

white-space : normal | pre | nowrap

取值：

normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-pliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-pliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

在固定宽度的条件下，只要加上word-wrap:break-word

word-break:break-all这行

代码，就能起到换行左右。如：

<div style="width:80px height:180px background:#FF0000"><p style="word-wrap:break-word word-break:break-all">afasdfjaklsdfjalkdjfalsdfjalsjdfasdfjalsfj</p></div>

效果

两种方式：一种方式，手机站css设置的时候全部用百分比来控制，这样所有的页面都会自动缩放；

第二种方式：需要你来判断浏览器的或者应该说是手机屏幕的大小，来设置其css样式：如：

当然我只是举个例子，其余的样式你可以自己设置，你设置个最大宽度与最小宽度max-width与min-width，一般都是320px--640px手机；

@media screen and (max-width:360px){body{font-size:12px}}

@media screen and判断如果浏览器宽度小于360px的话，执行样式，文字大小为12px

@media screen and (min-width:400px){body{font-size:18px}}

意思：判断浏览器宽度大于400px的时候，执行样式，文字大小为18px；