技巧 - font属性及单行文本省略号显示

CharlesY
391 阅读6分钟

概念 - CSS 文本属性

常用文本属性

序号属性描述说明
1font-size大小浏览器默认16px，设计图常用12px
2font-family字体字体中有空格时候，需要加引号；多个字体中间逗号链接 div{font-family:宋体,楷体,”PingFang SC”;}
3color颜色颜色名称：color:red; 十六进制：color:#ff0; 三位数字各对应rgb color:#14c145; rgb：color:rgb(255,0,0);
4font-weight加粗font-weight: bolder 或 bold 或 normal 或 lighter ; font-weight: number ; 100-500不加粗 600-900 加粗
5font-style斜体font-style: italic 倾斜 或 oblique 倾斜+强调 或 normal ;
6text-align水平text-align: left 或 center 或 right 或 justify ;
7line-height行高line-height: 16px ; 当line-height的数据等于height的数据，可以实现单行文本垂直居中
8text-indent首行缩进text-indent 可以取负值 text-indent: 2em ; 首行缩进两个汉字空格
9letter-spacing字间距控制文字和文字之间的间距
10text-decoration文本修饰text-decoration: none 或 underline 或 overline（上划线） 或 line-through（删除线） ; 可以同时设置多个属性，空格隔开 text-decoration:underline overline;
11text-transform大小写text-transform:capitalize(首字母大写) 或 lowercase(全小写) 或 uppercase(全大写) 或 none;
12font简写font:[font-style] [font-weight] [font-size/line-height] [font-family]; 顺序不能变，后两个不可省略，如果后面两个省略，其它效果不会显示 eg. font: normal bold 18px/30px 宋体,楷体 ;
13direction文本方向direction: rtl(简单的右对齐，最后一个符号(句号)显示在最左边，其余默认排列) 或 ltr ;
14unicode-bidi渲染方向unicode-bidi: isolated-override 或 isolated 或 bidi-override(严格按照direction属性的值重排序，忽略隐式双向运算规则) 或 embed 或 normal 或 plaintext ;
序号属性描述说明
1unicode-bidi渲染方向unicode-bidi: isolated-override 或 isolated 或 bidi-override(严格按照direction属性的值重排序，忽略隐式双向运算规则) 或 embed 或 normal 或 plaintext ;
2word-spacing词间空白属性增加或减少word之间的空白，不是单个字母 .ex1{word-spacing:20px;} PS:汉字的间隔调节用 letter-spacing 来实现,因为中文段落里没有word（英语单词），因而 word-spacing 通常起不到调整间距的作用。
3direction文本方向direction: rtl(简单的右对齐，最后一个符号(句号)显示在最左边，其余默认排列) 或 ltr ;
4white-space源码空白属性指定源码内的空白怎样处理 white-space:pre; 保留空白，不换行 white-space:nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到br white-space:pre-wrap; 保留空白，正常换行 white-space:pre-line; 合并空白符，只保留行内必要的空白符，保留换行符
5text-shadow文本阴影p{text-shadow:15px(水平阴影位置) -15px(垂直阴影位置) 5px(模糊的距离) green(阴影的颜色);}

语义化文本标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 强调效果</title>
    </head>
    <body>
        <b>粗体文本</b><br/>
        <em>着重文本</em><br/>
        <i>斜体文本</i><br/>
        <small>小号字体</small><br/>
        <strong>加重语气，粗体文本</strong>
        <!-- strong 和 b 都是加粗文本，但不同之处在于strong如果在网页阅读时会重读，而b不会，常常会用于盲人使用情况-->
        <p>文字<sub>下标</sub></p>
        <p>文字<sup>上标</sup></p>
        <ins>插入字</ins>
        <del>删除字</del>
        <!--<ins>和<del>通常一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。-->
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 计算机输出</title>
    </head>
    <body>
        <code>计算机代码，但效果不及CSS，逐渐被淘汰</code>
        <kbd>键盘码，已经被废弃</kbd>
        <samp>计算机代码样本，效果不及CSS，逐渐被淘汰</samp>
        <var>显示变量，效果不及CSS，逐渐被淘汰</var>
        <pre>
            预格式文本
            元素中的文本会保留空格和换行符
            且文本也会呈现为等宽字体
            常用来表示计算机的源代码
        </pre>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 特殊格式文本</title>
    </head>
    <body>
        <abbr title="Gross Domestic Product">
            GDP 缩写词能为检查程序、翻译系统、搜索引擎分度器提供有用的信息
        </abbr>
        
        <address>
            address元素位于body元素内部，则表述该文档所有者的联系信息,
            位于article元素内容，则表示该文章所有者的联系信息,
            address元素通常包含在footer元素中。
        </address>
        <article><address>定义本文章所有者的联系信息</address></article>
        
        <bdo dir="ltr">定义文字方向，从左至右</bdo><br/>
        <bdo dir="rtl">定义文字方向，从右至左</bdo><br/>
        <!--bdo指的是Bi-Direction Override，用来覆盖默认的文本方向-->
        
        <blockquote>
            定义长的引用(有段落缩进)
        </blockquote>
        引用：<q>标签定义一个短的引用，浏览器经常会在这种引用的周围插入引号</q><br/>
       
        <img src="https://txt22262.book118.com/2017/0703/book119866/119865518.jpg" width="200em" height="270em"/>
        
        <p>
            <cite>
            The Scream（定义作品的标题，比如书籍、歌曲、电影、电视节目、绘画、雕塑等的标题。注意，人名不属于作品的标题）
            </cite> 
            by Edward Munch. Painted in 1893.
        </p>
        
        <dfn>定义一个项目，呈现斜体，效果不及CSS，已逐步被废弃</dfn>
    </body>
</html>

字体模块 @font-face 语法规则

@font-face 是 CSS3 中的一个模块，主要功能是把用户自定义的字体嵌入到网页中。

@font-face 语法规则：

@font-face {
    font-family: Font-1-custom;
    src: url(./Font-0.ttf),url(./Font-1.ttf);
    font-weight: lighter | normal | bold | bolder | unset; /* 可选 */
    font-style: normal | italic | oblique | unset; /* 可选 */
}
div{
    font: normal normal 20px/25px FONT-1-CUSTOM; /* 自定义字体名称不区分大小写 */
}

技巧 - 如何实现因单行文本过长以省略号形式显示

问题痛点

网页开发过程中，常常会遇到不同大小的界面设备，有时候也会将界面或者容器进行放大和缩小，那么如何在文本不能减少而容器又变小的情况下，将文本多余的内容以省略号的形式表现出来，则是一个问题，显然这种情况不适合将文本未显示的部分写死成省略号，而是要动态进行显示

关键代码

//单行文本，溢出省略号
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

See also - overflow 溢出属性

overflow:hidden;    //溢出容器的部分直接隐藏
overflow:visible;   //溢出部分直接显示，忽视容器的界限
overflow:scroll;    //无论是否有溢出，都显示滚动条
overflow:auto;      //如果有溢出，则显示滚动条，如果没有，则不显示滚动条
overflow:inheri;    //继承父元素的overflow属性
overflow-x:[value]; //x轴溢出
overflow-y:[value]; //y轴溢出

See also - white-space 空余空间

white-space 空余空间属性，用于处理元素内的空白

white-space:nowrap;     //文本不换行，直到遇上br元素
white-space:normal;     //忽略空白（默认值）
white-space:pre;        //显示回车、空格，不换行
white-space:pre-wrap;   //显示回车、空格，换行
white-space:pre-line;   //显示回车，不显示空格，换行
white-space:inherit;

See also - text-overflow

text-overflow 规定了当文本溢出包含元素时所发生的事情。一般情况下，该属性用于标题部分布局，并且在一行中显示。然而当复制标题内容时，内容是完整的。

text-overflow:ellipsis; //溢出文本，省略号 =》要显示省略号，必须要要把容器的宽度先确定（不知道宽度，就不知道省略号显示到什么程度）
text-overflow:clip;     //溢出文本，直接裁剪，不显示省略号（默认）
avatar
文章
阅读
粉丝