zoukankan      html  css  js  c++  java
  • 如何使用css和jquery控制文章标题字数?

    如何使用css控制文章标题字数? 


    最佳答案

    控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果!

    看这个例子,你们可以复制到记事本保存为HTML文件看效果!

    <html>
    <title>css控制字数</title>
    <head>
    <style type="text/css">
    .dd
    {
    border: solid 1px gray;
    width:180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    course:hand;
    }
    </style>
    </head>
    <body>
    <span class="dd">
    
    信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数
    </span>
    <br>
    <div class="dd">
    信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数
    </div>
    </body>
    </html>



    看到效果后,您应该相信这不是虚言了吧,o(∩_∩)o...!

    其中white-space 属性设置如何处理元素内的空白。

    这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增

    的。

    继承性:Yes
    JavaScript 语法
    CSS 属性也可通过一段 JavaScript 被动态地改变。

    脚本语法:
    object.style.whiteSpace="nowrap"在我们的 HTML DOM 教程中,您可以找到更多有关 whiteSpace 属性

    的细节。

    p
    {
    white-space: normal
    }


    可能的值
    值 描述
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。


    名称:text-overflow
    分类:IE专有样式
    简述:设置是否使用省略号标示文本溢出
    概述:text-overflow是设置是否使用省略号标示文本溢出的样式(Style)。
    text-overflow详细说明语法:

    text-overflow : clip | ellipsis

    取值:

    clip :  默认值。不显示省略标记(...),而是简单的裁切
    ellipsis :  当对象内文本溢出时显示省略标记(...)



    overflow 属性设置当元素的内容溢出其区域时发生的事情。

    继承性:No

    说明
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素

    框中可以放下所有内容也会出现滚动条。
    JavaScript 语法
    CSS 属性也可通过一段 JavaScript 被动态地改变。

    脚本语法:
    object.style.overflow="hidden"在我们的 HTML DOM 教程中,您可以找到更多有关 overflow 属性 的细节。

    在我们的 HTML DOM 教程中,您也可以找到完整的 Style 对象参考手册。
    例子
    p
    {
    overflow: scroll
    }
    可能的值
    值 描述
    visible 默认。内容不会被修剪,会呈现在元素之外。
    hidden 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。
    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

     jquery方法

    $(".table-title").each(function(){
     var maxwidth=20;
     if($(this).text().length>maxwidth){
      $(this).text($(this).text().substring(0,maxwidth));
      $(this).html($(this).html()+"…");
     }
    });
    

      

    慌慌张张 匆匆忙忙 为何生活总是这样 难道说我的理想 就是这样度过一生的时光 不卑不亢 不慌不忙 也许生活应该这样 难道说六十岁以后 再去寻找我想要的自由 其实我也常对自己说 人要学会知足而常乐 可万事都一笑而过 还有什么意思呢
  • 相关阅读:
    【算法微解读】浅谈01分数规划
    【算法微解读】浅谈线段树
    近期目标
    【洛谷P5008 逛庭院】tarjan缩点+贪心
    【洛谷P1061 Jam的计数法】搜索
    【洛谷P1140 相似基因】动态规划
    【建兰普及模拟赛四】20181026
    【建兰普及模拟赛第三场】20181035
    【洛谷P2800又上锁妖塔】动态规划
    【建兰普及模拟赛第二场】20181024
  • 原文地址:https://www.cnblogs.com/siwy/p/4872168.html
Copyright © 2011-2022 走看看