CSS实用技巧：文字处理

 前言

目前成都创新互联已为近千家的企业提供了网站建设、域名、虚拟主机、绵阳服务器托管、企业网站设计、石嘴山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。

CSS实用技巧第一讲：文字处理

本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。

文本对齐方式

CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单。

如下：

 
 
 
 
    
  
  
  
  
  1. p{  
    2. 
  
  
  
  
  2.  text-align: center;  
    3. 
  
  
  
  
  3.  text-align: left;  
    4. 
  
  
  
  
  4.  text-align: right;  
    5. 
  
  
  
  
  5. } 
    6.

但是两端对齐你有用过吗？

只需要添加text-align-last:justify样式即可。请看示例：

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.  账号
  
  •  密码
    •   
  •  电子邮件
    •   
  •  

    • scss样式

     
 
 
 
      
  
  
  
  
    1. .justify-text {  
      2. 
  
  
  
  
    2.     .li {  
      3. 
  
  
  
  
    3.         padding: 0 20px;  
      4. 
  
  
  
  
    4.  margin-top: 10px;  
      5. 
  
  
  
  
    5.         width: 100px;  
      6. 
  
  
  
  
    6.         background-color: #f13f84;  
      7. 
  
  
  
  
    7.         line-height: 40px;  
      8. 
  
  
  
  
    8.         text-align-last: justify;  
      9. 
  
  
  
  
    9.         color: #fff;  
      10. 
  
  
  
  
    10.  list-style: none;  
      11. 
  
  
  
  
    11.         &:first-child {  
      12. 
  
  
  
  
    12.             margin-top: 0;  
      13. 
  
  
  
  
    13.         }  
      14. 
  
  
  
  
    14.     }  
      15. 
  
  
  
  
    15. } 
      16.

    CSS实用技巧第一讲：文字处理

    文本排版方向

    现代书本上的文字都是从左到右的顺序排列，但是古时候不同，文字都是从右至左排列的，现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。

    css也可以调整文本排版方向，是通过什么属性控制的呢？

    writing-mode 属性定义了文本在水平或垂直方向上如何排布。   

     
 
 
 
      
  
  
  
  
    1. writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr 
      2.

    下面看具体示例：

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.         
      诗经
        
      4. 
  
  
  
  
    4.         
        
      5. 
  
  
  
  
    5.  死生契阔，
        
      6. 
  
  
  
  
    6.  与子成说。
        
      7. 
  
  
  
  
    7.  执子之手，
        
      8. 
  
  
  
  
    8.  与子偕老。  
      9. 
  
  
  
  
    9.  
        
      10. 
  
  
  
  
    10.       
      11. 
  
  
  
  
    11.  
      12.

    scss样式

     
 
 
 
      
  
  
  
  
    1. .vertical-text {  
      2. 
  
  
  
  
    2.     writing-mode: vertical-rl; // 文字排版方向  
      3. 
  
  
  
  
    3.     h3 {  
      4. 
  
  
  
  
    4.         padding-left: 10px;  
      5. 
  
  
  
  
    5.         font-weight: bold;  
      6. 
  
  
  
  
    6.         font-size: 18px;  
      7. 
  
  
  
  
    7.         color: #d60f5c;  
      8. 
  
  
  
  
    8.     }  
      9. 
  
  
  
  
    9.     p {  
      10. 
  
  
  
  
    10.         line-height: 30px; // 行间距  
      11. 
  
  
  
  
    11.  letter-spacing: 7px; // 文字间距  
      12. 
  
  
  
  
    12.         color: #ee1166;  
      13. 
  
  
  
  
    13.     }  
      14. 
  
  
  
  
    14. } 
      15.

    CSS实用技巧第一讲：文字处理

    文本从右至左排列

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.  红豆生南国
        
      3. 
  
  
  
  
    3.  春来发几枝
        
      4. 
  
  
  
  
    4.  愿君多采撷
        
      5. 
  
  
  
  
    5.  此物最相思  
      6. 
  
  
  
  
    6.  
      7.

    scss样式

     
 
 
 
      
  
  
  
  
    1. .reverse-text {  
      2. 
  
  
  
  
    2.     font-weight: bold;  
      3. 
  
  
  
  
    3.     font-size: 30px;  
      4. 
  
  
  
  
    4.     color: #f13f84;  
      5. 
  
  
  
  
    5.  width: 200px;  
      6. 
  
  
  
  
    6.     letter-spacing: -70px; // letter-spacing最少是font-size的2倍  
      7. 
  
  
  
  
    7. } 
      8.

    CSS实用技巧第一讲：文字处理

    文本溢出控制

    文本溢出处理不管是PC或者是H5，都是非常常见的，非详情页面都会经常用到。

    文本溢出处理分为：单行文字溢出 和 多行文字溢出。下面看看具体示例：

    单行文字溢出

     
 
 
 
      
  
  
  
  
    1. 昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。 
      2.

    scss样式

     
 
 
 
      
  
  
  
  
    1. .ellipsis {  
      2. 
  
  
  
  
    2.  width: 200px;  
      3. 
  
  
  
  
    3.     overflow: hidden; // 溢出隐藏  
      4. 
  
  
  
  
    4.     text-overflow: ellipsis; // 溢出修饰 ellipsis省略号  
      5. 
  
  
  
  
    5.     white-space: nowrap; // 文本不会换行  
      6. 
  
  
  
  
    6. } 
      7.

    CSS实用技巧第一讲：文字处理

    多行文字溢出

    寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。

    满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！

    scss样式

     
 
 
 
      
  
  
  
  
    1. .ellipsis {  
      2. 
  
  
  
  
    2.  width: 400px;  
      3. 
  
  
  
  
    3.     display: -webkit-box;  
      4. 
  
  
  
  
    4.     overflow: hidden;  
      5. 
  
  
  
  
    5.     text-overflow: ellipsis;  
      6. 
  
  
  
  
    6.     -webkit-line-clamp: 3;  
      7. 
  
  
  
  
    7.     /* autoprefixer: off */  
      8. 
  
  
  
  
    8.     -webkit-box-orient: vertical;  
      9. 
  
  
  
  
    9.     /* autoprefixer: on */  
      10. 
  
  
  
  
    10. } 
      11.

    CSS实用技巧第一讲：文字处理

    注意

    使用文本溢出处理时，容器一定要定义宽度。

    多行文字溢出，scss样式添加注释autoprefixer: off并不是为了说明什么，而是，在webpack打包编译时，如果没有这个注释，-webkit-box-orient: vertical会被忽略掉。

    文本选择颜色

    在浏览器中，当你选择文本想要copy时，是不是会发现选择文本会有背景色和文字颜色呢？其实它是可以通过css定义的。

    使用::selection自定义文本选择颜色

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.  
      红豆生南国，
        
      3. 
  
  
  
  
    3.  春来发几枝。
        
      4. 
  
  
  
  
    4.  
      愿君多采撷，
        
      5. 
  
  
  
  
    5.  此物最相思。
        
      6. 
  
  
  
  
    6.  
      7.

    scss样式

     
 
 
 
      
  
  
  
  
    1. // 全局文本选择样式  
      2. 
  
  
  
  
    2. ::selection {  
      3. 
  
  
  
  
    3.     background-color: #f13f84;  
      4. 
  
  
  
  
    4.     color: #fff;  
      5. 
  
  
  
  
    5. }  
      6. 
  
  
  
  
    6. .select-color {  
      7. 
  
  
  
  
    7.     line-height: 30px;  
      8. 
  
  
  
  
    8.     font-weight: bold;  
      9. 
  
  
  
  
    9.     font-size: 30px;  
      10. 
  
  
  
  
    10.     color: #d60f5c;  
      11. 
  
  
  
  
    11. }  
      12. 
  
  
  
  
    12. // 具体某个选择器下 文本选择样式  
      13. 
  
  
  
  
    13. .special::selection {  
      14. 
  
  
  
  
    14.     background-color: #00b7a3;  
      15. 
  
  
  
  
    15. } 
      16.

    CSS实用技巧第一讲：文字处理

    总结

    有空把CSS3及其选择器和伪元素伪类等知识点复习一遍，温故而知新。多使用Chrome的DevTools来调试CSS，提示式的填值能发现很多有趣的属性。多尝试不同的方式实现相同功能，多实践。项目中多试用CSS的新特性，不要总是被低版本浏览器束缚着，这样也一直难以进步。在使用JS完成一个简单的效果前先想想能不能用纯CSS来完成。这样你的CSS技能就能得到稳步提升。

    最后谢谢大家的支持。

    本文题目：CSS实用技巧：文字处理
    浏览地址：http://www.gawzjz.com/qtweb2/news15/415.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    微信公众号知识

    同城分类信息

    wap网站建设　　 　网络营销　　 　绵阳服务器托管　　 　尊格展览　　 　成都网络推广　　 　成都免费建网站　　 　手提袋印刷制作　　 　成都网站制作　　 　成都康明斯发电机　　 　成都光华机房服务器托管　　 　新华建筑装饰　　 　德阳服务器托管　　 　西信服务器托管　　 　成都网站改版　　 　眉山做网站　　 　成都网站设计　　 　成都宣传海报　　 　成都二枢机房　　 　标志设计　　 　广安网站建设