css实现文本缩略显示

转载自http://blog.csdn.net/mushui0633/article/details/65685655

单行:

对应的css中加入

overflow:hidden;//超出一行文字自动隐藏
text-overflow:ellipsis;//文字隐藏后添加省略号
white-space:nowrap;//强制不换行

多行:

 display: -webkit-box;
 word-break: break-all;
 text-overflow: ellipsis;
 font-size: 32rpx;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp:2;

转载自http://blog.csdn.net/mushui0633/article/details/65685655

时间: 2024-10-29 19:07:12

css实现文本缩略显示的相关文章

文章缩略显示

网页中文章缩略介绍第二行超出内容缩略显示 用的是-webkit-私有属性.用js已经解决.代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 转载自网页.

css之单行缩略..以及多行缩略

html单行缩略方法 .oneline { white-space: nowrap; //强制文本在一行内输出 overflow: hidden; //隐藏溢出部分 text-overflow: ellipsis; //对溢出部分加上... } html多行缩略(主要针对webkit内核) .multiline { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: bre

使用css实现文本可以部分显示和全部显示效果

我们经常会看到一些网页有如下效果: 点击文本的小箭头后: 想要达到如下的效果,其实并不难,我的思路是,先使用一个div(先设置一个小于p高度的值,并使用overflow:hidden;,使p显示只有div设置高度以内的内容,当点击div时,变为和p一样的高度),在里面用一个p标记存放所有的文本内容,用一个i标记(上图1小箭头)用于第一次点击显示全部文本(使用hover,设置点击后,i标记的高度为0,就可以达到点击后影藏上图1小箭头的效果),于此同时,再在p标记中加一个i标记(上图2小箭头)用于第

css 设置文本多行显示再隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 46px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webk

JS显示文献来源和缩略词

<html><head> <title></title> <style type="text/css"> abbr{ text-decoration:underline; } body{ background-color:#ccc; color:#333; font-size: 20px; } </style></head><body> <h1>what is the Docum

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

显示缩略列表 JS DOM

以下body部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Explaining the Ddocument Ob Model</title> <link href="style08.css" type="text/css" rel="sty

CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overfl

css 溢出文本显示省略号

这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符,但 是通过控制字数来截取的话还是存在一个大问题的,因为中文和英文的字符宽度问题,这个字数不好控制,而且通用性较差.那么有没有更好的方法呢,比如直接用 CSS来解决的,当然是有的. text-overflow是一个