css 文本单行、多行超出省略

实现单行

.nowrap{

　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;

}

实现多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

关于css实现单行、多行省略标记：http://www.cnblogs.com/moutudou/p/7077705.html

时间： 2024-10-13 12:07:33

css 文本单行、多行超出省略的相关文章

css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 原文地址:https://www.cnblogs.com/baobao0205/p/11620418.html

CSS文本单行或者多行超出区域省略号(...)显示方法

单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...) 2.white-space: nowrap | normal | pre|pre-wrap|pre-line; normal :默认.空白会被浏览器忽略. pre:空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowwrap:文本不会换行,文本

CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果: 原文地址:https://www.cnblogs.com/zzz-knight/p/11644912.html

css文本截字，超出文本省略号显示

一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: hidden;/*溢出隐藏*/ } 效果: 二.多行文本截字 p{ display:-webkit-box;/*设置盒子为弹性盒容器*/ -webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/ -webkit-line-clamp:2;/*显示两行*/ text

htnl5中设置文本单行显示，超出部分打省略号，鼠标移到文本时alt出全部文本内容

Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: .myspan{ width: 100px; height: 25px; overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } 运行效果:

css实现单行、多行文本超出显示省略号

前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换行 } 语法:text-overflo

css 文本溢出截断省略方案

在项目开发的过程中,我们往往遇到文本溢出需要添加省略号的需求.而这个需求可以分解为两个,一个是单行溢出省略,一个是多行溢出省略. 单行溢出省略 <div class="ellipsis"> 这是一行文字,需要溢出添加省略号,因为这行文字特别特别长 </div> <style> .ellipsis { width: 100%; /* IE6 needs any width */ white-space: nowrap; /*强制不换行*/ -o-tex

css --文本超出范围通过...实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> p { width: 50px; height: 40px; line-height: 40px; border: 1px solid gray; border-radius: 5px; text-ove

CSS 文本溢出时显示省略标记

如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ