关于css:CSS笔记

解决长短内容

长内容

overflow-wrap

用来阐明当一个不能被离开的字符串太长而不能填充器包裹盒时，避免溢出，浏览器是否容许单词中断换行。

 硬换行：在文本的换行点插入了理论换行符
软换行：文本实际上仍在同一行，但看起来被分成了几行。word-break-all:break-all 让长英文单词属于软换行~~~~

overflow-wrap 属性是 word-wrap 属性，参数：normal | break-word | anywhere
normal: 只在容许的断字点换行 (浏览器放弃默认解决)
break-word: 在长单词或 URL 地址外部进行换行，不必思考单词的完整性。anywhere:

anywhere 和 break-word 的异同

在失常状态下，anywhere 和 break-word 的体现是一样的，即如果行中没有其余可承受的断点，则能够在任何点断开本来不可断开的字符串（如长单词或 URL），并且在断点处不插入连字符。（间断的英文字符如果能够不必断就一直，如果切实不行，就断开，因而相比 break-all 可能会留白。）

anywhere 和 break-word 的不同之处

在 overflow-wrap:anywhere 计算最小内容尺寸的时候会思考软换行，而 overflow-wrap:break-word 不会思考软换行。

Hyphens

用来告知浏览器在华航是如何应用连字符连贯单词，能够齐全阻止应用连字符串，也能够管制浏览器什么时候应用，或者让浏览器决定什么时候应用。

.element{hyphens:auto;}

文本截断解决

截断是指在句子的开端增加点，以表明有更多的文本内容。

.element{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

多行文本截断解决

如果要截断多个行，能够应用 line-clamp 属性。

.element{
    display:-webkit-box;
    -webit-line-clamp:3;  // 指定截断~~~~ 的最大行数
    -webkit-box-orient:vertical;
    overflow:hidden;
}

如果为元素增加 padding, 容易失败，导致显示下一行的一部分 (应该被截断)

程度滚动

截断或连贯一个单词，使代码折行显示，达不到想要的成果

overflow-wrap:break-word;  

overflow-x:auto;  // 程度滚动 

短内容

设置一个最小宽度

min-width

用例和示例

集体资料卡

/* 1*/
.element{
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;~~~~
}
/* 2*/
.element{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

导航项

在解决多语言布局时，内容长度会发生变化。最好为导航项设置最小宽度。

文章内容

长单词或者链接在溢出导致程度滚动后，能够应用 goverflow-wrap 或者 hyphens

补充内容

width 属性

参数：

• fill-available 主动填满残余空间，
  在 div 没有任何款式的时候，浏览器是赞找主动填充的款式出现的，就是 100%width 的款式填充的。
• max-content 和 min-content 是会追随有定宽的最大最小宽度，不会进行膨胀。
• fit-content, 能够实现元素膨胀成果同时，放弃本来的 block 程度状态，于是就能够应用 margin:auto 实现元素向内自适应同时的居中成果了。

本文只作为学习记录。