"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"explorer.confirmDelete": false,
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions":{
"js-beautify-html":{
"wrap_attributes":"auto"
}
}
}
清爽多了
摘抄自https://www.cnblogs.com/listen9436/p/13064294.html
HTML结构：<p class="one">1.只对英文起作用，以字母作为换行依据</p>
<p class="two">2.只对英文起作用，以单词作为换行依据</p>
<p class="three">3.只对中文起作用，强制换行</p>
<p class="four">4.强制不换行，都起作用</p>
<p class="five">5.不换行，超出部分隐藏且以省略号形式出现</p>
<p class="five">6.不换行，超出部分隐藏且以省略号形式出现</p>
CSS代码：
.one{ word-break:break-allwidth:150px}/*只对英文起作用，以字母作为换行依据*/
.two{ word-wrap:break-wordwidth:150px}/*--只对英文起作用，以单词作为换行依据*/
.three{white-space:pre-wrapwidth:150px}/*只对中文起作用，强制换行*/
.four{white-space:nowrapwidth:10px}/*强制不换行，都起作用*/
.five{white-space:nowrapoverflow:hiddentext-overflow:ellipsiswidth:100px}／/*不换行，超出部分隐藏且以省略号形式出现*/
1. word-break:break-all只对英文起作用，以字母作为换行依据
2. word-wrap:break-word只对英文起作用，以单词作为换行依据
3.{white-space:pre-wrap只对中文起作用，强制换行
4.{white-space:nowrap强制不换行，都起作用
5.{white-space:nowrapoverflow:hiddentext-overflow:ellipsis不换行，超出部分隐藏且以省略号形式出现
注意，一定要指定容器的宽度，不然的话是没有用的。
注意word-break 是IE5+专有属性
语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
html中有两类元素（也就是标签），block和inline。
block类型的标签默认情况下会在两边自动加上换行。而inline则不会。
表格属于block类型的，所以它会跳到下一行。要想让它不自动换行可以设置它的css样式display属性的值为inline.
如<body>
这是前面的文字<table style="display:inline"><tr><td>这是表格里的内容
</td></tr></table>
</body>
html 强制不换行标签元素：
可以用nobr标签来实现。
nobr语法
<nobr>内容</nobr>
不换行内容放入<nobr>与</nobr>之间即可。
此标签与css white-space功能相同。
nobr标签特点：如不遇到br换行标签，内容在一行显示完，如遇到br换行标签，内容将在加br换行自动换行。
html nobr禁止内容换行案例：
这里假如有4行文章标题列表，设置宽度为200px；css行高为22px；对4列的内容我们采用ul li列表布局，其中2个对内容加<nobr>标签，一个li内容不加，另外一个li内容少与宽度能显示完。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）