`
zlpx
  • 浏览: 153540 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5中截取文字

CSS3 
阅读更多

下面的例子展示了如何在在HTML5中截取text。通过设置 text-overflow 样式为“ellipsis”。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .truncated {
            color: red;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique sagittis urna, at laoreet mi rutrum porta. Aenean elementum magna ut odio tincidunt aliquet.</p>
    <p class="truncated">Curabitur iaculis ullamcorper urna non varius. Vestibulum ullamcorper, tortor in mattis blandit, turpis quam placerat erat, nec ornare dui tortor vitae odio.</p>
    <p>Sed a odio felis. In placerat, velit ac tincidunt viverra, ipsum justo pretium tellus, quis tempus ipsum felis ac sem. Pellentesque in malesuada odio.</p>
 
</body>
</html>

 源码下载：

 

truncating-text-in-html-5.zip

分享到：
| 用JQuery改变HTML中Element的text颜色
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    截取html字符串中的所有文字

    截取html字符串中的所有文字,过滤掉html标签和脚本信息.

    vue结合html实时截取textarea文本

    vue结合html实时截取textarea文本，获取鼠标下标，截取自定义文本，不错的demo

    从富文本(HTML字符串)中获取图片

    html中获取图片 文章中提取图片 正则获取图片 富文本提取图片路径 字符中中获取图片路径 html中获取图片 文章中提取图片 正则获取图片 富文本提取图片路径 字符中中获取图片路径 html中获取图片 文章中提取图片 正则...

    PHP HTML代码串截取代码

    需求：将一段文字截取一定的物理长度显示，注意，要截取的不是字符串的字节数，UFT-8 的编码中文字符是3个字节或者4个字节的，而显示的时候中文会占两个字符的长度，英文字符只占一个，全角的时候又有不同。

    PHP HTML代码串 截取实现代码

    将一段文字截取一定的物理长度显示，注意，要截取的不是字符串的字节数，UFT-8 的编码中文字符是3个字节或者4个字节的，而显示的时候中文会占两个字符的长度，英文字符只占一个，全角的时候又有不同。

    Java实现从Html文本中提取纯文本的方法

    今天小编就为大家分享一篇Java实现从Html文本中提取纯文本的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    CSS3截取字符串实例代码【推荐】

    截取字符串一般是用js或者后台语言来实现，其实使用CSS也是可以实现此效果的。 代码实例如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=" utf-8"&gt; &lt;meta name="author" content=...

    用css截取字符实现文字自动截断隐藏溢出文本

    说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中会被认为是字符总长的百分比。 方法二： 复制代码代码...

    Html长文本超出标记宽度后自动截取实现代码

    我们在显示长文本时，往往需要去在Ｃ#端去截取字符，但这绝对不是一个好方面，因为我们的长文本往往都是代ＨＴＭＬ标记的，你一个载不好，就会出现乱码问题（出现半个ＨＴＭＬ标记），而比较好的作法就是通过ＣＳＳ...

    《Android4.0网络编程详解》 高清扫描 完整版 PDF电子书 详细书签

    《Android4.0网络编程详解》 高清扫描 完整版 PDF电子书 详细书签 作者：王家林(作者) 出版社:电子工业出版社;...今后阅读PDF书籍时，运行ABBYY Screenshot Reader这个附带的小工具，随心所欲截取PDF书中的文字。

    微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    但是canvas中没有提供方法，只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法： wxml： &lt;canvas canvas-id='word' id='test'&gt;&lt;/canvas&gt; canvas肯定要一个画板容器啦，记得设置宽高哦，小程序中...

    网页文字资源分析及代码生成器

    一个网页文字内容自动截取工具，可以用于测试结果，生成PB代码

    如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let ...

    让很多内容只显示一部分，然后点击展开显示全部

    新闻内容，只显示部分，点击展开，可以显示全部新闻内容，点击收起，可以改变为只显示部分内容，通过JS截取字符串实现。

    css 文字上右下环绕广告的写法

    或者是利用程序截取一段文字在头部的办法。今天终于找到一种写法，就是用一个宽度为1的空标签的高度来占位，然后图片清除浮动，来制造出这个顶部文字环绕的效果。啥都不说了，看代码 &lt;!DOCTYPE html PUBLIC “-/...

    【新版双码率】视频云转码系统源码,秒切+秒传,m3u8切片程序 ,html5播放器,全开源

    核心功能有：m3u8加密伪装、图片水印、文字滚动水印、自定义位置截图、自定义位置自定义时长截取GIF动图、自定义上传文件位置、自定义生成m3u8位置、上传文件秒传功能、自定义目录自动转码等 拓展功能 防盗链功能：...

    企业SEO站 v17.2 无组件生成HTML.rar

    27、修正后台编辑器无法调整文字大小bug.修复缩略图上传失败等的问题。 28、修正截取中文字符bug，修正文章发布时间问题。 29、增加轮播图功能，可后台维护轮播图，改善面包屑导航，显示各级路径。 30、产品代表...

Magicbox
Global site tag (gtag.js) - Google Analytics