文本

最新推荐文章于 2024-04-22 10:19:55 发布

lulu_jiang

最新推荐文章于 2024-04-22 10:19:55 发布

阅读量837

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/lulu_jiang/article/details/42490615

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

*{margin:0;padding:0;font-family:Arial;font-size:14px;} /**************************** 文本基本属性 ***************************/ /* CSS字体类型 */ /* font-family定义字体类型 */ /* font

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        *{margin:0;padding:0;font-family:Arial;font-size:14px;}

        /**************************** 文本基本属性 ***************************/
        /* CSS字体类型 */
        /* font-family定义字体类型 */
        /* font-style定义字体样式 */
        /* font-weight定义字体粗细 */
        /* font-size-adjust定义是否强制对文本使用同一尺寸 */
        /* font-stretch定义是否横向拉伸变形字体 */
        /* font-variant定义字体大小写 */
        /* font:font-style font-weight / line-height font-family; */

        /* CSS文本类型 */
        /* word-spacing定义词与词的间距 */
        /* letter-spacing定义字符的间距 */
        /* vertical-align定义文本垂直对齐方式 */
        /* text-decoration定义文本的修饰线 */
        /* text-indent定义文本首行缩进 */
        /* text-align定义文本水平对齐方式 */
        /* line-height定义文本行高 */
        /* text-transform定义文本大小写 */
        /* text-shadow定义文本阴影效果 */
        /* white-space定义文字间和文本之间的空白间距 */
        /* direction控制文本流入方式 */
        /* color定义文本颜色 */

        /**************************** CSS3文本阴影属性 ***************************/
        /* text-shadow:x-offset y-offset blur-radius [color] */
        /* text-shadow制作的文本阴影，无须修改元素盒模型，不会改变盒模型尺寸 */
        #text1>div{text-shadow:0 0 4px rgba(0,0,0,0.8);display:inline-block;padding:5px;color:#f7edf7;text-align:center;background:blue;margin:5px;font-size:50px;}
        #text1>div:nth-of-type(2){text-shadow:2px 2px 0 red,3px 3px 0 red,4px 4px 0 red}
        #text1>div:nth-of-type(3){text-shadow:9px 2px 5px #fff}

        /**************************** CSS3文本溢出属性 ***************************/
        /* text-overflow:clip | ellipsis */
        /* text-overflow属性起作用需要：1.width明确文本容器宽度2.white-space给文本内容设置强制不换行3.设置容器文本溢出时隐藏 */
        #text2>div:nth-of-type(1){text-overflow:clip;width:100px;white-space:nowrap;overflow:hidden;border:1px solid #ccc;}
        #text2>div:nth-of-type(2){text-overflow:ellipsis;width:100px;white-space:nowrap;overflow:hidden;border:1px solid #ccc;}

        /**************************** CSS3文本换行属性 ***************************/
        /* word-wrap:normal(只在半角空格或连字符的地方换行) | break-word(将内容在边界内换行，不截断英文单词) */
        #text3>div:nth-of-type(1){word-wrap:normal;width:100px;border:1px solid #ccc;}
        #text3>div:nth-of-type(2){word-wrap:break-word;width:100px;border:1px solid #ccc;}
        /* word-break:normal(根据语言自己的规定换行) | break-all(强制截断英文单字) | keep-all(不允许字断开chrome,safari无效) */
        #text3>div:nth-of-type(3){word-break:break-all;width:100px;border:1px solid #ccc;}

        /**************************** white-space属性 ***************************/
        /* normal忽略文本见多余空白 */
        #text4>div:nth-of-type(1){white-space:normal;}
        /* pre保留文本空格，类型pre标签效果 */
        #text4>div:nth-of-type(2){white-space:pre;width:100px;border:1px solid #ccc;}
        /* nowrap空格不会自动换行，直到碰到<br/>标签 */
        #text4>div:nth-of-type(3){white-space:nowrap;width:100px;border:1px solid #ccc;}
        /* pre-line合并多余空白，自动换行 */
        #text4>div:nth-of-type(4){white-space:pre-line;width:100px;border:1px solid #ccc;}
        /* pre-wrap保留文本空格，自动换行 */
        #text4>div:nth-of-type(5){white-space:pre-wrap;width:100px;border:1px solid #ccc;}

        /**************************** 文本换行技巧 ***************************/
        pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;white-space:-pre-wrap;white-space:-o-pre-wrap;white-space:-moz-pre-wrap !important;white-space:-hp-pre-wrap;word-wrap:break-word;}
        table{table-layout:fixed;width:200px;}
        table td{overflow:hidden;word-wrap:break-word;}
        /* 标签自动换行 */
        element{overflow:hidden;word-wrap:break-word;}
    </style>
</head>
<body>
    <div id="text1">
        <div>W3CPLUS</div>
        <div>W3CPLUS</div>
        <div>W3CPLUS</div>
    </div>
    <div id="text2">
        <div>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
        <div>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
    </div>
    <div id="text3">
        <div>WWWWW Hello WWWWWWWWWWWWWWWWWWWWWWWWW</div>
        <div>WWWWW Hello WWWWWWWWWWWWWWWWWWWWWWWWW</div>
        <div>WWWWW Hello WWWWWWWWWWWWWWWWWWWWWWWWW</div>
    </div>
    <div id="text4">
        <div>W         W W W W W W W W W W W W W W W W W W W W W W W W W W W W W W </div>
        <div>W         W W W W W W W W W W W W W W W W W W W W W W W W W W W W W W </div>
        <div>W         W W W W W W W W W W W W W W W W W W W W W W W W W W W W W W </div>
        <div>W         W W W W W W W W W W W W W W W W W W W W W W W W W W W W W W </div>
        <div>W         W W W W W W W W W W W W W W W W W W W W W W W W W W W W W W </div>
    </div>
</body>
</html>

lulu_jiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本

*{margin:0;padding:0;font-family:Arial;font-size:14px;} /**************************** 文本基本属性 ***************************/ /* CSS字体类型 */ /* font-family定义字体类型 */ /* font
复制链接

扫一扫