css知识点

• 容器盒子内：长数字和英文字母不换行
  解决办法：盒子内加上以下代码

word-wrap: break-word;

• 针对部分ios中flex布局混乱

.div{
display: flex;
}
.div-item{
flex:1;
}

改成

.div {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.div-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}

• 多行文本溢出隐藏

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;  //  外联样式可能不生效
word-break: break-all;

不生效原因：webpack3不编译 -webkit-box-orient: vertical
解决办法1: autoprefixer:on和autoprefixer:off必须用/* */包住，不要用//进行注释哟！

width:331px;
height:100px;
font-size:17px;
color:rgba(51,51,51,1);
line-height:25px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
/* autoprefixer:off */
-webkit-box-orient: vertical;
/* autoprefixer:on */
word-break: break-all;

解决办法2:直接写成内联样式

<strong style={{ webkitBoxOrient: 'vertical' }}>  </strong>

• 从后台得到的段落格式文本，前端原样式输出
  方法一：

white-space: pre-wrap;
word-break: break-all;

white-space:规定段落中的文本是否进行换行
white-space:normal;(默认，会被浏览器忽视)
white-space:pre(空白会被浏览器忽视)
white-space:nowrap(文本不会换行，文本会在同一行上继续，直到遇到为止)
white-space:pre-wrap(保留空白符序列，但是正常进行换行)
white-space:pre-line(合并空白符序列，但是保留换行符)
white-space:inherit(规定应该从父元素集成white-space的属性)

word-break:在恰当的段字点进行换行
work-break:normal(使用浏览器的默认换行规则)
work-break:break-all(允许在单词内进行换行)
work-break:keep-all(只能在半角空格或连字符出换行)

方法二：

<pre>直接使用这个标签</pre>

效果如图：

image.png
注：左边为前端展示效果，右边为控制台打印效果

• css粘性定位

position: sticky

• css缩进

text-indent:50px;
//  length  定义固定的缩进。默认值：0。
//  %   定义基于父元素宽度的百分比的缩进。
//  inherit 规定应该从父元素继承 text-indent 属性的值。

• del 标签 与 ins 标签

<p><del>这段文本已被删除。 </del>,哈哈哈哈</p>

image.png

<ins>这一段文本是新插入至文档的。</ins>

image.png

• ruby 标签

<ruby>
  小 <rp>(</rp><rt>xiao</rt><rp>)</rp>
  丰 <rp>(</rp><rt>feng</rt><rp>)</rp>
</ruby>

• bdo 标签

<p>这段文本是从左到右的</p>
<p><bdo dir="rtl">这段文本是从右到左的</bdo></p>

image.png

• 响应式布局
  1.设置html根字体大小
  2.设计稿像素/100

html {
  font-size: calc(100vw / 3.75);
}
.wrap {
  font-size: 0.16rem;  //相当于16px
}