css3文字样式及换行处理

最新推荐文章于 2023-10-02 21:21:39 发布
最新推荐文章于 2023-10-02 21:21:39 发布
阅读量637 收藏
点赞数
分类专栏： css3文字样式及换行处理 文章标签： css3文字样式及换行处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40999917/article/details/101378830
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*body{
            background: gray;
        }*/
        p{
            width:200px;
            border:1px solid red;
            font-size:50px;
            color:#fff;
        }
        .p{
            font-size:50px;
            color:#fff;
            text-shadow: 2px 2px;
        }
        .p1{    
            text-shadow: 2px 2px 5px blue;
        }
        .p2{
            /*多色阴影*/
            text-shadow: 0px 0px 5px red,2px 2px 20px blue;
        }
        .p3{
            /*凸起*/
            text-shadow:1px 1px 1px #fff,-1px -1px 1px #000;
        }
        .p4{
            /*凸起*/
            text-shadow:1px 1px 1px #fff,-1px -1px 1px #000;
        }
        .p5{
            /*发光*/
            text-shadow:0px 0px 1px #fff,
                        1px 1px 15px #ff00de,
                        -1px -1px 15px #ff00de;
        }
        .p6{
            /*燃烧*/
            text-shadow:0 0 1px #fff,
                        0 -2px 5px #fd0,
                        0 -5px 5px #fd0,
                        0 -10px 10px #f80;
        }
        .p7{
            /*3D*/
            text-shadow: 0 0 1px #eee,
                        -1px -1px 1px #ddd,
                        -2px -2px 1px #ddd,
                        -3px -4px 1px #ddd,
                        -4px -4px 1px #ddd;
        }
        p.wordbreak{
            color:#000;
            /*根据空格或者分隔符可以实现换行，长单词不会换行*/
            word-wrap: normal;
        
        }
        p.wordbreak2{
            color:#000;
            /*允许长单词换行*/
            word-wrap: break-word;
        }
        p.wordbreak3{
            color:#000;
            /*允许长单词换行*/
            word-break: keep-all;
            /*只允许空格和连接符换行*/
        }
        p.textoverflow{
            color:#000;
            height:400px;
            overflow: hidden;
            /*多余的文字剪切*/
            text-overflow: clip;
            
        }
        p.textoverflow2{
            color:#000;
            height:400px;
            overflow: hidden;
            /*多余的文字使用省略号代替*/
            text-overflow: ellipsis;
        }
        p.whitespace{
            color:#000;
            white-space: normal
            /*保留一个空格，多余的忽略*/
            white-space: pre;
        }
        p.other{
            color:#000;
            width:500px;
            font-size:20px;
            overflow: hidden;
            /*英文换行显示一行*/
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        p.other2{
            color:#000;
            width:500px;
            font-size:20px;
            /*它没有出现在 CSS 规范草案中。
            为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：*/
            /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
            display: -webkit-box;
            overflow: hidden;
            /*text-overflow: ellipsis;*/
            /*英文换行显示两行*/
            -webkit-line-clamp: 2;
            /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
            -webkit-box-orient: vertical;    
        }
    </style>
</head>
<body>
    <p class="p">HTML5+CSS3</p>

    <p class="p1">段落内容段落内容1</p>
    <p class="p2">多色阴影</p>
    <p class="p3">凸起</p>
    <p class="p4">凸起</p>
    <p class="p5">发光</p>
    <p class="p6">燃烧</p>
    <p class="p7">3D</p>

    <p class="wordbreak">word-wrap: normal;根据空格或者分隔符可以实现换行，长单词不会换行</p>
    <p class="wordbreak">aaaaaaaa,根据空格或者分隔符可以实现换行，长单词不会换行 aaaaaaaaaa+aaaaaaaaaaa</p>
    <p class="wordbreak2">aaaaaaaa,允许长单词换行
            word-wrap: break-word; aaaaaaaaaa+aaaaaaaaaaa</p>
    <p class="wordbreak3">word-break: keep-all;
            /*只允许空格和连接符换行</p>

    <p class="textoverflow">text-overflow: clip;
            /*多余的文字剪切多余的文字剪切多余的文字剪切多余的文字剪切</p>
    <p class="textoverflow2">text-overflow:ellipsis;多余的文字使用省略号代替ellipsis;ellipsis;</p>
    <p class="textoverflow">11111111111111 11111111,111111111.111111111</p>
    
    <!-- <pre>段落内容    段落内容段</pre>
    <span>段落内容    段落内容段</span> -->
    <p class="whitespace">段落内容      段落内容段落       内容段落内容段落内容段落内容段落内容</p>
    
    <!-- 在一行中剪切多余的文本，用省略号代替 -->
    <p class="other">white-space: nowrap;
            text-overflow: ellipsis;显示一行英文换行      段落内容段落       内容段落内容段落内容段落内容段落内容</p>
    <p class="other2"> 英文换行显示两行
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;        段落内容段落       内容段落内容段落内容段落内容段落内容</p>

</body>
</html>

盏茶作酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析css html span 块状不换行问题
12-13
span标记的样式设定width属性，会发现不会产生效果。 如果设置display:block，width属性生效，但是此时的span跟div一样了。 如果设置display:inline-block，则span并列在同行，而且width属性生效。 元素display...
css3属性文字换行,CSS3让文本自动换行——word-break属性
weixin_29958955的博客
08-04 1236
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能。2.指定自动换行的处理方法在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。div{word-break:break-all;}word-break属性可以使用的值值换行规则IE5以上Safari与Chromenormal使用浏览器默认的换行规则支持支持keep-all只能在半角空格或连字符处换行支持不支...
CSS3 自动换行
weixin_43794749的博客
03-21 1198
文章目录1.1纯文本1.2带数字和英文 1.1纯文本 设置了宽度就可以自动换行 1.2带数字和英文 word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。 word-wrap 属性允许长单词或 URL 地址换行到下一行。 word-wrap: normal|break-word; normal:只在允许的断字点换行（浏览器保持默认处理）。 break-word:在长单...
CSS3之文本换行word-wrap
梦龙小站
10-10 2364
大家在制作的时候有时候会碰到英文文本超过固定宽度，不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制，让其看起来接近完美。当CSS3出现的时候，我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。
Css Flex 弹性布局中的换行与溢出处理方法
最新发布
忧郁的蛋的专栏
10-02 1万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
css控制2行换行,CSS控制本文换行：word
weixin_36040903的博客
08-04 730
在页面上对文本进行修饰的时候，特别是针对西文文本，往往会涉及到单词过长需要换行的问题(这里暂不讨论CJK系的文本)。本篇文章将会讨论两个用于控制文本换行的CSS属性word-wrap和word-break。word-wrap我们先来看看mozilla上如何定义word-wrap的。The word-wrap CSS property is used to specify whether or no...
css3文字效果.html
09-25
css3文字效果及换行处理，各种文字样式的设置，及文字换行溢出省略
css固定宽度并且让最后一行文字换行
12-13
今天群里有人问了个问题：在固定宽度的块级元素中，里面的内容最后...固定宽度文字换行</title> <style type=”text/css”> *{margin:0;padding:0;} body{font:12px SimSun;} a{color:blue;text-decoration
HTML5&CSS3网页制作：字体样式属性.pptx
06-01
为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。 6 @font-face属性用于定义服务器字体。 7 word-wrap属性用于长单词和URL地址的自动换行 1 font-size属性用于设置字号。 2 font-family属性...
html代码实现文字转图片的代码，自动换行
04-20
我们使用了html2canvas库将id为text的div元素转换为canvas元素，并将canvas元素转换为...同时，我们使用了CSS样式控制文字的换行。最后，我们在页面上添加了一个按钮，点击按钮即可将文字转换为图片并显示在页面上。
css3属性文字换行,CSS3 文本效果
weixin_36216860的博客
08-04 381
CSS3 文本效果CSS3 包含多个新的文本特性。在本章中，您将学到如下文本属性：text-shadowword-wrap浏览器支持属性浏览器支持text-shadowword-wrapInternet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。所有主流浏览器都支持 word-wrap 属性。注释：Internet E...
CSS3 文本换行
weixin_34248705的博客
12-18 199
文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了，会出现撑破容器的现象，很难看，如下图 容器定宽150px的前提下，普通文字如左图浏览器足以胜任自动换行，右图...
CSS文字排版
m0_63057114的博客
03-16 975
一、CSS文字换行；二、文字不换行，超出部分显示省略号、三、文字两端对齐或文字在容器中平均分布；四、文字竖排显示
css3 从左到右自动换行和多行排列方式
周家大小姐
04-22 6988
如果一行放不下就会自动换行 flex-wrap: wrap; .box{ display: flex; justify-content: space-between;//左右布局 width:300px; height: 300px; background: pink; flex-wrap: wrap; } .child1 ,.child2{ backgroun...
css3文本换行
liya_nan的博客
10-11 2695
首先我们看一下未对文本进行处理的效果： 下面是代码实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .text { width: 300px; height: auto; border: 1px solid pink; } &lt;/style...
CSS3 【display: flex； 】与【flex-wrap: 换行模式；】的使用
卡尔特斯
01-18 3687
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad
html怎么从左到右排列,css3 从左到右自动换行和多行排列方式
weixin_32941303的博客
06-22 2076
如果一行放不下就会自动换行flex-wrap: wrap;.box{display: flex;justify-content: space-between;//左右布局width:300px;height: 300px;background: pink;flex-wrap: wrap;}.child1 ,.child2{background: red;width: 100px;height: 1...
css 第二行换行,CSS换行详解
weixin_36155846的博客
08-03 1749
普通文本段落的换行案例说明：在实际应用中我们常遇到这样的问题，就是一段文本，有了明确的宽度，需要文本自动换行。(如下图)案例分析：上面两个图，没有使用任何排版的CSS属性，也就是默认情况下，块元素里的文本，达到边缘以后会自动换行。但是这里有个特例：就是内容全部为英文字母(没有单词句子，没有词和词之间的空格)，此时文本就不自动换行了(见下图)特殊情况：有时候你写的东东，默认情况下并不自动换行，这多半...
css 如何控制文字换行、省略
XloveL2021924的博客
10-27 3949
CSS 如何控制文字换行、省略
css样式文字不换行
06-01
可以使用 CSS 的 `white-space` 属性来控制文字是否换行。具体来说，如果想让文字不换行，可以将 `white-space` 的值设置为 `nowrap`。例如： ```css p { white-space: nowrap; } ``` 这样，`p` 元素中的文字就不会换行了。如果想让某个元素内的文字在一定的宽度内不换行，可以使用 `overflow` 属性来控制。例如： ```css div { width: 200px; overflow: hidden; white-space: nowrap; } ``` 这样，`div` 元素中的文字就会在宽度为 200px 的区域内不换行，并且超出部分会被隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值