html中内容超出显示省略号的方法

本博客主要介绍前端开发中文本过多，以省略号显示。

效果如图：

单行：

<!--单行-->
<p class="pl">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，当点击hidden时，滚动机制关闭，</p>

CSS

/*单行文本的溢出显示省略号*/.pl{width: 200px;overflow:hidden;text-overflow:ellipsis; background: goldenrod;white-space: nowrap;/*加宽度width属来兼容部分浏览*/}

多行：

<div id="p2">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，当点击hidden时，滚动机制关闭，内容会被修剪，但是浏览器不会显示供查看内容的滚动条，默认值是 visible。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</div>

CSS

/*多行文本溢出显示省略号*/
#p{width:220px;height:58px;overflow:hidden;text-overflow:ellipsis;background: greenyellow;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;/*-webkit-line-clamp是用来限制在一个块级元素内显示的文本行数，为了实现这个效果，需要结合其他-webkit属性。常见属性如下：display:-webkit-box;必须结合的属性，将对象作为弹性盒子模型显示。-webkit-box-orient:vertical;必须结合的属性,设置或检索伸缩盒子模型对象的子元素的排列方式。    */
}

转载于:https://www.cnblogs.com/z-l-d/p/10409354.html

html中内容超出显示省略号的方法相关推荐

文本超出显示省略号的方法
1.一行文本超出显示省略号的方法:text-overflow和white-space超出隐藏显示省略号设计css样式时,遇到要使文本在一行内显示,超出则加省略号的问题解决办法: 只需要使用text- ...
Vue文本内容超出显示省略号，超出显示tooltip提示
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 代码中有用到Element-UI的组件,还有会提示在Table组件中和 ...
Vue文本内容超出显示省略号，超出显示tooltip提示2.0
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 我用两种方式满足了需求,这是其中一种,想看另一种可以查看Vue文本内容 ...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
在td标签中文字超出显示省略号,鼠标悬停显示所有文本首先得在table的style中加入table-layout:fixed,让表格固定,然后用width设定表格的宽度. 然后表格中所有的列都一样宽 ...
Vue完成数据请求后内容超出显示省略号+显示查看全文按钮
需求: 如下图,当Vue完成数据请求后,根据文章内容设置显示方式.10行以内的显示全文,不显示[查看全文]按钮:内容超过指定行数时,超出内容隐藏,末尾显示省略号并显示[查看全文]按钮. 实现思路在 ...
css实现内容超出显示省略号且触碰显示完整内容
css 样式此时的设置可以完美实现文本框中的内容超长显示为省略号,但是想知道全部内容是不可能的 overflow: hidden; text-overflow: ellipsis; white-sp ...
uniapp中nvue页面中设置超出显示省略号
css代码:verflow: hidden;word-break: break-all; /* break-all(允许在单词内换行 */text-overflow: ellipsis; /* 超出部 ...
div里面的内容超出显示省略号（一行显示）
width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 注:如果使用display:flex;会导致省 ...
html 超出显示出来,html超出显示省略号
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: elli ...

html中内容超出显示省略号的方法

html中内容超出显示省略号的方法

html中内容超出显示省略号的方法相关推荐

最新文章

热门文章