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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.inaline{
overflow: hidden;
white-space:nowrap;   //单行显示溢出以省略号显示方法
text-overflow: ellipsis;
}

.intowline{
display: -webkit-box !important;
overflow: hidden;         //多行显示溢出以省略号显示方法
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}

div{
float:left;
width:200px;
height:100px;
border:1px solid #ff0000;
}
</style>
<body>
<div class="inaline">我激发健康是福就开始放假啊分开发健康房间爱咖啡就爱看剪发卡双方均埃里克</div>
<div><p class="intowline">爱咖啡就我激发健康是福就开始放假啊分开发健康房间爱咖啡就我激发健康是福就开始放假啊分开发健康房间爱咖啡就爱看剪发卡双方均埃里克</p></div>
</body>
</html>

时间： 2024-10-22 07:46:51

单行文本和多行文本溢出以省略号显示方法的相关文章

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

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

如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？

先看下效果图: 下面是CSS代码: <style type="text/css"> /*让未知尺寸的图片.单行文本.多行文本水平垂直居中*/ .wrap { border: 1px solid #0094ff; width: 200px; height: 200px; /*下面是实现垂直居中的关键,没有之一*/ display: table-cell; text-align: center; vertical-align: middle; } .wrap .subwrap

溢出用省略号显示

overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行 //上面是一行内容的时候,当有两行的内容时候 overflow: hidden;text-overflow: ellipsis;display:-webkit-box; //作为弹性伸缩盒子模型显示.-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列-webkit

单行文本与多行文本省略文本

一.单行文本省略     1.text-overflow:ellipsis;该属性用于当文本溢出的时候用省略号的方式显示.它还有一个属性值是clip(溢出部分直接裁剪掉). 2.overflow:hidden;对溢出内容进行隐藏. 3.white-space:nowrap;强制在一行显示 二.多行文本省略 用-webkit-line-clamp:number;实现,并不是css规范中的属性. 其次,用css规范属性. 可参考http://www.cnblogs.com/accordion/p/6

单行文本、多行文本显示省略号...

一.单行文本 .box { width: 200px;   overflow: hidden;   text-overflow:ellipsis;   white-space: nowrap;   } 二.多行文本 1. csss实现,适用于webkit内核浏览器.移动端.微信可以,火狐不可以 .box {  width: 200px;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; over

文本溢出用省略号显示

文本溢出,分为单行文本溢出以及多行文本溢出, 单行文本溢出css代码如下: 1 p{ 2 overflow: hidden;//超出部分隐藏: 3 white-space: nowrap;//强制不换行: 4 text-overflow:ellipsis;//超出部分用省略号显示: 5 } 多行文本溢出css代码如下: 1 div{ 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; 5 -webkit-l

实现溢出变省略号的方法

第一种(单行文本) white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 要使用 white-space: nowrap; 尽量别使用<nobr></nobr>标签 可能会导致不兼容的情况发生 第二种(多行文本) text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-bo

单选文本及多行文本溢出问题

1.单行 HTML: <span class="col_one_text">测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</span> CSS: .col_one_text{ display: inline-block; width: 70px; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsi

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

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