关于省略号 ...

以前文字过去用省略号是用js写的，今天发现CSS3也能实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:200px;
    background:#ccc;
}
</style>
</head>
<body>
<div class="test_demo">
  超酷的IT技术学习平台（我是省略号）
</div>
</body>
</html>

超酷的IT技术学习平台（...

时间： 2024-08-09 06:22:04

关于省略号 ...的相关文章

CSS，bootstrap表格控制当td内容过长时用省略号表示，以及在不使用bootstrap时过长也用省略号表示

首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后在表头th中设置每列的宽度 <table style="table-layout:fixed"> <th width="10%">Title01</th> <th width="20%">Title02

CSS3如何实现超出指定文本以省略号显示效果

作者:zhanhailiang 日期:2014-10-24 不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境.H5真的日渐成熟了,得恶补下了. 以下分享实现指定文本超出部分以省略号展示的Demo: <style> .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-ov

html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替

前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆. 实现div框四个角都钝角的操作:设置 div : border-radius=10px; 实现div框一个角的钝角效果 :设置div :border-top-left-radius=10px; border-top-right-radius=10px; border-bottom-left-radius=10px; border-bottom-right-radius=10px; html实现限制一行字数

单行文本和多行文本溢出显示省略号

1.单行文本 overflow: hidden; white-space: nowrap; //用于处理元素内的空白,只在一行内显示 text-overflow: ellipsis; //超过宽度使用省略号 2.多行文本 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; //对象作为伸缩盒子模型显示          -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元

如何让多文本内容只显示一行，其余用省略号来显示

在此需要用到三个属性配合使用: overflow: hidden;/*超出部分隐藏*/white-space: nowrap;/*不换行*/text-overflow:ellipsis;/*超出部分省略号显示*/ 实例:<p> 兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦 既然不是毛毛虫 就要壮烈的扑火 短暂青春要像 烟火 </p> css代码:<style> *{ margin: 0; padding: 0;} p{ width: 100px; height:

可变参数省略号使用简介

C允许定义形参个数和类型不确定的函数.例如,C语言中的标准函数printf便使用这种机制.在声明不确定形参的函数时,形参部分可以使用省略号“…”代替.“…”告诉编译器,在函数调用时不检查形参类型是否与实参类型相同,也不检查参数个数. 如: [[email protected] exercise]# vi chang.c#include <stdio.h>int mult(int x , int y , const char * fmt , ...){ int result = x * y; i

CSS实现文本溢出的部分用省略号代替的方法

我们通常在设计网页的时候,由于相关的需求需要一行定宽,然而有时候文字的展现过长就会溢出.今天,E良师益友网就单行和多行两种情况来说明一下溢出的文字用省略号代替. 一.单行溢出 1,单行溢出,超出部分显示...或者截取.前提必须有宽度. CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip; 实现代码: width:300px; overflow: hidden; text-overf

超出内容用省略号替代

最近学习了一下怎么用省略号代替超出的文本. 虽然网上的资料很多,但俗话说得好,好记性不如烂笔头,还是记一下吧! 有两种方法,第一是用CSS实现:第二是用js HTML <p id="text">9月10日,孙俪在微博晒出一张等等为小花小妹妹吹头发的照片,她还配文写道“瞧,咱这哥哥当的.”照片中,等等拿着吹风机认真的为妹妹小花吹着头发,十分可爱.等等还用手摸着妹妹的头,十分的细心.从侧面看,等等的表情很是认真.</p> CSS #text{ width: 600p

多行文本溢出省略号显示

1.单行文本溢出 p { overflow : hidden; text-overflow: ellipsis; white-space:nowrap; } 2.多行文本溢出——单纯只用css方法只有用非标准样式且只兼容webkit内核或者opera浏览器 2.1—— -webkit-line-clamp属性 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -

限制EditText或者TextView显示的字符长度，超出部分用省略号代替

在布局文件中: 限制显示的字符长度——android:maxEms=""(最大显示字符数) 在结尾用省略号——android:ellipseize="end" 为了实现效果,还得限制文本的行数,开始的时候限制显示一行,用的是android:singleline="true" 不过好像这个现在不怎么推荐使用了,而是用android:maxlines=""(要显示的行数,1或n什么的)