文字内容超出两行时显示省略号

这篇具有很好参考价值的文章主要介绍了文字内容超出两行时显示省略号。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

文字内容超出两行时显示省略号

<view class="newsTitle">
	这里是一条很长很长很长的内容
</view>

设置内容超出两行显示省略号的css样式如下:

.newsTitle{
	width: 536rpx;  //设置宽度
	font-size: 32rpx;
	font-weight: 700;
	line-height: 52rpx;
	text-align: left;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;  //使用自适应布局
	-webkit-line-clamp: 2;  //设置超出行数,要设置超出几行显示省略号就把这里改成几
	-webkit-box-orient: vertical;
}

这个样式可用于uniapp的微信小程序开发。文章来源地址https://www.toymoban.com/news/detail-539402.html

到了这里,关于文字内容超出两行时显示省略号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+elementui 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容

    表单内的输入框一般为固定宽度,当输入框内容长度超出输入框宽度时,需要显示省略号,并设置鼠标移到输入框上时悬浮展示全部内容。 假如不生效 可以再前面在

    2024年02月12日
    浏览(28)
  • Vue + Element UI 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容的方法

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 在 Vue 项目中,经常需要处理文本内容过长的情况。本文将介绍如何使用 Vue 和 Element UI 实现文本超出长度时显示

    2024年02月09日
    浏览(31)
  • echarts统计图x轴文字过长,以省略号显示,鼠标经过提示全部内容

    效果图如下 主要代码如下:

    2024年02月15日
    浏览(42)
  • 【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号

            element plus中el-table采用的是el-scrollbar,无法采用全局默认滚动条样式修改,需要单独写公共样式。 原生滚动条样式 el-table滚动条样式 效果图:         el-table设置了自定义样式后,为el-table-column添加fixed=\\\"right\\\"属性,此时表格侧边栏固定列出现样式错乱,自定义

    2024年02月12日
    浏览(43)
  • 【css】超过文本显示省略号

    显示省略号的前提:必须有指定宽度 一、单行文本超出部分显示省略号 属性 取值 解释 overflow hidden 当内容超过盒子宽度, 隐藏溢出部分 white-space nowrap 让文字在一行内显示, 不换行 text-overflow ellipsis 如果溢出的内容是文字, 就用省略号代替 二、多行文本超出部分显示省略号

    2024年02月13日
    浏览(22)
  • Vue超出文本框显示省略号,鼠标滑入显示全部

            在开发过程中经常会遇到空间太小文字展示不全的问题,对于一些数据可能影响不大,但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了。解决办法:通过鼠标划入展示全部文字的效果用来解决。         title属性的定义和用法 title 属性规定关于元素

    2024年02月11日
    浏览(24)
  • 6.溢出的文字省略号显示

    必须满足三个条件 【示例代码】 多行文本溢出显示省略号,有较大兼容性问题, 适合于webKit浏览器或移动端(移动端大部分是webkit内核) 语法 : 【示例代码】 更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。 CSS的vertical-align属性使用场

    2024年02月16日
    浏览(37)
  • 微信小程序 rich-text 超过 2 行显示省略号

    rich-text(富文本),如果想实现文本超过两行变成省略号,常规的 div 可以实现,但因为是在微信小程序中,同时使用的是 rich-text 返回的是富文本,所以不能简单的使用以下代码实现: 因为富文本使用的 rich-text 回显的,想着直接对这个标签写上这个 CSS,发现也无法达到想

    2024年02月03日
    浏览(28)
  • css文本超长显示省略号,鼠标hover省略号展示全部内容

    有时候我们会发现鼠标hover到文字省略号上,会展示出全部内容,效果如下: 首先,文字过长展示省略号 再借助鼠标悬停标签展示其 title 内容的特性,为标签加上 title属性,实现我们想要的效果 有关 title 属性的介绍:

    2024年02月11日
    浏览(34)
  • vue3自定义指令实现超出显示省略号,鼠标浮入弹出title,显示全部文本

    mounted 和 updated 是 Vue 生命周期钩子函数,分别表示 指令挂载到元素 和 指令所在组件更新时触发 。 el : HTMLElement 和 binding : DirectiveBinding 是方法参数, el 表示指令作用的元素, binding 包含指令的绑定值、参数和修饰符等信息。 el.offsetWidth 获取的是元素在渲染时所占据的整体

    2024年02月01日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包