超出部分隐藏 不显示...不截取

最新推荐文章于 2023-04-25 16:57:37 发布
最新推荐文章于 2023-04-25 16:57:37 发布
阅读量273 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I1326/article/details/121540747
版权

超出部分隐藏 不显示…不截取

今日做个搜索热词的需求，设计强制要求热词关键词不得超出搜索框宽度并切不可切割不可设置省略号；
先看成品样式；
在这里插入图片描述
这里实际热词还有
在这里插入图片描述

直接设置overflow的话超出的部分会被直接截掉，肯定是不可以的；
在这里插入图片描述

添加text-overflow: ellipsis又会出现省略号，样式上好像也不太行；
在这里插入图片描述
由于这里后台抓取的热词长度、数量都不固定，一时不知道怎么处理，甚至有想过拿js过一遍筛子；
在懒惰的驱使下，很明显最优解是直接把热词截取后展示的三个省略号隐藏掉；

直接为热词的父级设置字体颜色为color:#fff; 热词的span元素覆盖color:#666;完美解决问题；

I1326
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现文字内容不被截断当超出指定长度时该字符串自动整体换到下一行
xiaof 的博客
10-16 5383
效果图： 1、内容不被截断 span {        overflow:hidden;        white-space:nowrap;        text-overflow:ellipsis;        list-style: none;        word-break:keep-all;        float:left; } 2、超出行
html文本显示不完整,css 内容显示不全怎么办
weixin_39804335的博客
06-04 2453
该方法适用于所有品牌的电脑。解决div+css网页内容显示不完整在测试网页效果时，你是否为网页在IE6版本的浏览器中能正常打开，网页显示完整。而在IE7及以上版本和火狐浏览器中却显示不完整而烦恼呢？今天我们将和大家一起探讨如何解决div+css网页内容显示不完整的问题。一、初步分析原因俗话说得好，事出有因。那么出现网页在IE7及以上版本和火狐浏览器中显示不完整的原因是什么呢？研究发现，有以下两个：...
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
前端开发小白9527
04-25 827
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
css设置文本显示高度隐藏超出部分
Ghjkku的博客
02-20 732
overflow 属性规定当内容溢出元素框时发生的事情。当元素值设置为hidden是就会隐藏超出的部分。css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。内容不会被修剪，会呈现在元素之外。通过height属性设置文本元素的显示高度，通过。设置文本元素超出高度时显示隐藏。
CSS如何解决页面字体溢出隐藏
weixin_58149434的博客
03-29 532
注释：在css标签内，将overflow属性设置为hidden，设置超出宽度的文本隐藏，并将text-overflow属性设置为ellipsis，让隐藏的文本以省略号显示。将white-space属性设置为nowrap，让文本在一行显示。
简介内容超出部分文字隐藏省略的特效(可显示)
09-05
这就是“简介内容超出部分文字隐藏省略的特效”所涉及的核心内容。这种特效通常应用于文章摘要、产品介绍或者任何需要限制显示长度的文本内容上。当文字超出预设的字符数时，超出的部分会被省略，并用省略号表示，...
基于JavaScript实现文字超出部分隐藏
10-22
这个示例中，我们将讨论如何使用JavaScript来实现文字超出部分隐藏的功能。 首先，我们看到HTML结构中包含了两个`<div>`元素，它们都有不同的类名（`.text` 和 `.text1`）。这两个`<div>`分别包含了两段文字，其中`...
解决echarts中横坐标值显示不全(自动隐藏)问题
10-15
在使用ECharts绘制图表时，有时会遇到横坐标值显示不全的问题，特别是在数据量大或者标签内容较长的情况下，ECharts为了保持图表的清晰度，会自动隐藏部分横坐标标签。本文将详细介绍如何解决这个问题。 首先，...
jQuery实现图片等比例缩放截取显示特效源码.zip
11-07
如果需要截取显示，可能还需要用到`overflow:hidden`来隐藏超出容器的部分。 实现这一特效的步骤大致如下： 1. **加载图片**：使用`$(document).ready()`确保DOM加载完成后执行代码，防止图片未加载时进行操作。 2...
jQuery给固定文章字数超出自述以后文字不显示并替换成省略.zip
07-04
2. 定义CSS样式，用于隐藏超出部分的文字和添加省略号。这里我们可以创建一个类，例如`truncated`，并设置`overflow`和`text-overflow`属性。 ```css .truncated { overflow: hidden; text-overflow: ellipsis; ...
【css】文字溢出，显示省略符号（...）/ 点点点
sayyy的专栏
08-02 4159
略
css常见问题
元仙僧的博客
07-31 880
1.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？ 当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。 chrome中，使用collapse值和使用hidden没有区别。 firefox，opera和IE，使用collapse值和使用display：none没有什么区别。 2.displ...
css 文字溢出隐藏 css 文字溢出隐藏无效解决办法
m0_49789433的博客
06-17 3100
css 文字溢出隐藏 网上那么多居然都是无效写法
CSS overflow 属性
weixin_33770878的博客
06-04 188
定义和用法 overflow 属性规定当内容溢出元素框时发生的事情。 说明 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值： visible 继承性： no 版本： CSS2 JavaScript 语法： object.styl...
css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
零一的博客
05-03 3740
css3 属性 text-overflow: ellipsis前言正文 前言 我们在设计网站的时候有时会遇到这样一个需求：因为页面空间大小的问题，需要将多余的文字隐藏起来，并以省略号代替，类似这样的效果： 做到这样的效果，我们需要运用两个特殊的样式来实现 text-overflow 和 white-space 正文 让我们分别来看一下使用了这些样式，和不使用这些样式的区别吧 1. 不使用特殊样...
超过两行隐藏，超出部分用省略号表示
weixin_42475367的博客
07-28 644
border: 1rpx solid #6db33f; display: -webkit-box; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: normal;/*规定段落中的文本不进行换行 */ word-wrap: break-word; -webkit...
CSS的内容溢出和剪裁:overflow
kerryqpw的博客
04-13 4419
CSS的内容溢出和剪裁:overflow
怎么截取div中的超出的文字
最新发布
05-24
在上面的代码中，将div设置为禁止文字换行，并且隐藏超出部分，最后使用省略号表示超出部分。这样，当div中的文字超出时，就会自动显示省略号。 如果你想要截取指定长度的文字，可以使用JavaScript来实现。你可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值