精华内容
下载资源
问答
  • ),然而我只知道关于单行内字符多余时按省略号显示的css样式,所以特意看了一下腾讯视频网页上的源代码,copy了一个技能css样式代码:word-break: break-all;/*属性规定自动换行的处理方法。normal(使用浏览器默认...

    今天弄到一个显示电影详情的模块时,发现电影简介栏内如果字符过多,字就会溢出div容器,(真是难看!),然而我只知道关于单行内字符多余时按省略号显示的css样式,所以特意看了一下腾讯视频网页上的源代码,copy了一个技能

    css样式代码:

    word-break: break-all;/*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
    展开全文
  • 大家应该都知道text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 css 代码:overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 但是这个属性...

    本文章转载于http://www.css88.com/archives/5206

    大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

    css 代码:
    1. overflow: hidden;
    2. text-overflow: ellipsis;
    3. white-space: nowrap;

    但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。

    WebKit浏览器或移动端的页面

    在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
    常见结合属性:

    1. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    2. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    3. text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
    css 代码:
    1. overflow : hidden;
    2. text-overflow: ellipsis;
    3. display: -webkit-box;
    4. -webkit-line-clamp: 2;
    5. -webkit-box-orient: vertical;

    这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

    具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/

    -o-ellipsis-lastline

    从 Opera 10.60 开始,text-overflow属性有了一个名为-o-ellipsis-lastline的值。应用后的效果就像名字一样,在文本的最后一行加上省略号。这个方法比楼上的方法简单多了,可惜也不在标准之内//(ㄒoㄒ)//

    p {
        overflow: hidden;
        white-space: normal;
        height: 3em;
        text-overflow: -o-ellipsis-lastline;
    }

    Demo: http://jsfiddle.net/Cople/ash5v/


    跨浏览器兼容的方案

    比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

    例如:

    css 代码:
    1. p {
    2. position:relative;
    3. line-height:1.4em;
    4. /* 3 times the line-height to show 3 lines */
    5. height:4.2em;
    6. overflow:hidden;
    7. }
    8. p::after {
    9. content:"...";
    10. font-weight:bold;
    11. position:absolute;
    12. bottom:0;
    13. right:0;
    14. padding:0 20px 1px 45px;
    15. background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    16. }

    看demo:http://jsfiddle.net/feiwen8772/qaxh927w/1/?utm_source=website&utm_medium=embed&utm_campaign=qaxh927w

    这里注意几点:

    1. height高度真好是line-height的3倍;
    2. 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
    3. IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
    4. 要支持IE8,需要将::after替换成:after

    JavaScript 方案

    用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:

    1.Clamp.js

    下载及文档地址:https://github.com/josephschmitt/Clamp.js
    使用也非常简单:

    js 代码:
    1. var module = document.getElementById("clamp-this-module");
    2. $clamp(module, {clamp: 3});

    2.jQuery插件-jQuery.dotdotdot

    这个使用起来也很方便:

    js 代码:
    1. $(document).ready(function() {
    2. $("#wrapper").dotdotdot({
    3. // configuration goes here
    4. });
    5. });

    下载及详细文档地址:https://github.com/BeSite/jQuery.dotdotdothttp://dotdotdot.frebsite.nl/

    参考:
    http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
    http://css-tricks.com/line-clampin/


    下面的是js脚本加正则表达式来实现(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)

    $(".figcaption").each(function(i){
        var divH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > divH) {
            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        };
    });

    Demo: http://jsfiddle.net/Cople/DrML4/5/


    展开全文
  • 前面我们已讲过浏览器忽略HTML文件中的多余空格和回车,对浏览器而言,一个空格与两个...如果你在浏览器上显示这段代码,你会发现它不如你预料的那样,浏览器忽略了两行文本间的回车换行符,你看到的是下面的:I am ...

    前面我们已讲过浏览器忽略HTML文件中的多余空格和回车,对浏览器而言,一个空格与

    两个或多个空格的作用是一样的,看下面这段代码:

    Two Lines of Text

    I am the first line of text.

    I am the second line of text.

    如果你在浏览器上显示这段代码,你会发现它不如你预料的那样,浏览器忽略了两行文本间的回车换行符,你看到的是下面的:

    I am the first line of text. I am the second line of text.

    因此怎样在网页中插入行分隔符呢?要达到此目的就要使用一个HTML标识符,
    标识符能显示多行文本,如下面的那样:

    Two Lines of Text

    I am the first line of text.

    I am the second line of text.

    网络浏览器会将这段代码理解为我们所期望的那样——文本以两行来显示。注意标识符
    不是一个容器标识符,就是说,并不需要类似的符号。

    展开全文
  • 显示一个景点的描述,数据是后台从数据库获取的,我这边要做的前端展示是 ,文案显三行,多余的文字显示省略号(···) ,文案的后边有然后【阅读全文】的字样,要实现的效果图,如下所示:我是 jquery字符串...

    最近做的一个页面中,显示一个景点的描述,数据是后台从数据库获取的,我这边要做的前端展示是 ,文案显三行,多余的文字显示省略号(···) ,文案的后边有然后【阅读全文】的字样,要实现的效果图,如下所示:

    我是用 jquery字符串截取的方式来完成,具体实现方法如下:
    html:

     <div class="main_cont">
      <span class="word_cont">随着人们生活水平的提高,越来越多的人选择出去旅游来度过自己的假期。     海南省三亚市是一座美丽的滨海城市,自然风光优美,气候宜人,是一个旅游度假的好地方,所以每年都会...   </span>
      <a href="" class="f14 c_3eb382 read_all">[阅读全文]</a>
       </div>
           <style>
              .word_cont
               }
                 width:485px;
               {
               margin: 10px 0 15px;
               font-size: 14px;
               line-height: 1.6em;
               color: #5e646b;
               }
    

    jquery:

    $('.word_cont').each(function(){
     //设置显示获取字符串的字数  这个根绝要求 看需要大概显示几行
        var maxwidth=80;   
        if($(this).text().length>maxwidth){
             //截取字符串
            $(this).text($(this).text().substring(0,maxwidth));
            //多余的用省略号显示
            $(this).html($(this).html()+'...');
        }
    });
    

    这种js方法也可以实现,显示多行文本时 多余的显示··· ,通常我们可以用css来完成,具体方法如下:

       width:XX; 
       overflow: hidden;
       text-overflow: ellipsis;
       word-break: break-all;
       display: -webkit-box;
       -webkit-box-orient: vertical;
        //要显示的行数
       -webkit-line-clamp: 2;
    
    这种方法的缺点是,只有在谷歌浏览器有效果,其他的浏览器都没有效果,所以····还是用js来实现吧
    

    以上 ,如有错误欢迎指正。或你有其他的实现方法也可以提出来

    展开全文
  • 如果只显示一行,则可以使用以下方法:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;如果需要显示多行,在需要设置的元素style中添加以下代码:word-break: break-all;text-overflow: ellipsis;...
  • PowerPoint2007从网页导入文本  PowerPoint 可接受来自多种网页格式的文本,包括HTML 和MHTLM (单个文件网页)。如果数据采用了有序的大纲格式或最初是从PowerPoint 文件中创建的,那么这种方法非常有用,因为所需...
  • 网页文本编辑器

    千次阅读 2013-05-07 09:42:39
    * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。 * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。 ...
  • 经常使用PPT的朋友都知道PowerPoint可接受来自多种网页格式的文本,包括HTML 和MHTLM (单个文件网页)。如果数据采用了有序的大纲格式或最初是从PowerPoint 文件中创建的,那么这种方法非常有用,因为所需的清理工作...
  • Python爬取网页内容的所有关键词并保存至Excel,话不多叙,直接上代码。本文爬取了www_runoob_com某页面展示的全部关键词。import requestsimport openpyxlfrom lxmlimport etreeimport reurl = 'https...
  • 网页文字的排版,说难也不能难,往往我们不清楚、模糊的情况下,查一下w3c或者百度,一下就出来咯,次数多了终究显得麻烦。为了解决这一通病,总结了一些加深一下理解,让以后在网页的文字排版随心就能达到在word...
  • <!DOCTYPE html> <html lang="ch"> <head> ...meta charset="UTF-8">...溢出的内容显示省略号</title> <style type="text/css"> .b1{ width: 200px; overflow:h
  • 通常情况下,我们希望网页能被正确的解析,页面上不要出现多余的html标签。而有些时候我们又希望能够显示诸如“”这样的内容在段落中。为了避免html标签被解析掉,找了如下几种方法:1、将所有的“”替换为“>”...
  • CSS -- 控制多出文本显示省略号

    千次阅读 2016-04-01 17:33:16
    由于网页排版需要,有些地方过长的文本需要加省略号。比如,限制标签宽度为100px,超出...”控制多出文本显示省略号”>控制多出文本显示省略号CSS 样式:label { font-size: 14px ; display : block; width : 120p
  • 经常上网找资料,可能会遇到这样的情况:想要的内容只能看,不能复制。如果只是只言片语,还可以自己手工打字。但要是内容很多,这样做就太慢了。...2、打开需要提取文字的网页鼠标双击“天若”的图标,然后在网...
  • 文本溢出overflowwhite-spacetext-overflow三.文本溢出变省略号设置 一.新闻列表的编写流程 1.结构: 如果后面有时间: <li> <a href="#">新闻条</a> <span>2020-03-25</span> <...
  • 准确地说,是一体化的静态文本网页网页一体化,就是在一个单独的html网页中,内置所有JavaScript程序和CSS样式表,不插入任何图片和其他多媒体,建立尽可能少的必要功能,页面简洁清晰,操作简便,并开放源代码,...
  • 来源 |https://wintc.top/article/58多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写...
  • 内容两行显示,以…结束,不多说,直接整个页面代码 一看就明白 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试</title> <...
  • -TRIM()删除单元格内容中间多余的空格,CLEAN()删除文本中的换行。 我们在工作中从数据库或网页获取的数据,经常会有不确定的空格以及换行,这对我们的数据分析工作会造成很多麻烦,如进行公式计算、查找数据、引用...
  • 文本处理

    千次阅读 2020-10-23 09:12:16
    所有类 Unix 的操作系统都非常依赖于被用于几种数据类型存储的文本文件。所以这很有道理, 有许多用于处理文本的工具。在这一章中,我们将看一些被用来“切割”文本的程序。在下一章中, 我们将查看更多的文本处理...
  • 是一个文本转换器,它的主要功能是用来把HTML网页转换成TXT文件,因此说它当之无愧是一个HTML转TXT工具。HTML网页如果直接存储成TXT文本的话,你会发现TXT文件保留了HTML文件的特殊格式与一些控制符,手动删除起来要...
  • 表格中文本过长,让超出的部分显示为省略号,鼠标划过的时候显示全名,很好的解决办法。
  •   软回车是 Shift + Enter 产生的,它换行,但是并不换段,即前后两段文字在 Word 中属于同一“段”。在应用格式时你会体会到这一点。 键盘上只有一种回车键Enter,但却有两种不同性质的换行标记,不能...
  • 需要使用html5文档类型,也就是在html文件头部使用&lt;!DOCTYPE html&gt; bootstarp3默认的css本身对移动设备友好支持。为了确保适当的绘制和触屏缩放,需要在头部加上viewport meta标签: &lt;meta ...
  • 本教程整理了使用Dreamweaver制作网页的20个技巧。希望对您有所帮助。1)怎样将 Dreamweaver 集成到 IE 浏览器? Dreamweaver 安装程序会在上下文选单增加一个“ Edit with Dreamweaver ”命令,我们还可以修改 ...
  • HTML - 文本及其格式化

    千次阅读 2017-12-29 10:07:05
    HTML 文本格式化HTML 文本格式化标签标签描述定义粗体文本定义着重文字定义斜体字定义小号字... 或者 意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。2. ins/del 标记删
  • Word 文档转变成网页显示

    千次阅读 2019-04-26 21:50:38
    我认为在ASP.NET MVC中,要想将Word 文档转变成网页显示到页面上,需要以下五步: 1、确定选中的是不是Word文档 2、将文件保存到指定的文件夹中 3、将word转换HTML 4、精简筛选 5、保存最终结果 一、确定选中的是...
  • 如图实际值,单词间有多个空格,但浏览器解析显示为一个空格。 附浏览器空格处理: 一、使用全角空格 全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。 二、使用空格的...
  • CSS控制网页中每行显示的字数个数

    千次阅读 2018-03-15 23:13:09
    多余的字数 “...代替” p{ width:900px; &lt;!--显示宽度--&gt; overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} 自动换行 1. &lt;style type="text/css"&gt; p{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,248
精华内容 5,699
关键字:

网页多余文本用点显示