css面试中遇到了文本框省略显示的效果展示代码

最新推荐文章于 2021-11-23 10:48:37 发布
最新推荐文章于 2021-11-23 10:48:37 发布
阅读量425 收藏 1
点赞数
分类专栏： 初学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LBikang/article/details/52920678
版权
<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<title>text-overflow案例在线演示</title>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    


<style type="text/css"> 
#a{white-space: nowrap}
#divcss5 li{width:300px;
overflow:hidden;text-overflow:ellipsis;   
</style>    
<!-- 有两种不允许换行的方式 white-space;nobr  html标签 -->
</head>    
<body>    
<ul id="divcss5">    
<li id="a">#8226; 显示不完显示省略号，测试内容</li>    
<li><nobr>#8226; 第二排测试内容超出显示省的信息</nobr></li>    
<li><a href="#"><nobr>#8226; 能显示完几个字测试省略的使用</nobr></a></li>    
</ul>    
</body>    
</html>
LBikang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css文本框与按钮美化效果代码
10-30
CSS 文本框与按钮美化效果代码 CSS 表单美化是 Web 开发中非常重要的一方面，今天我们将讨论如何使用 CSS 使文本框与按钮变得更加美观。下面我们将详细介绍两种不同的文本框与按钮美化效果。 无立体效果的文本框与...
判断元素是否被css样式隐藏；是否出现省略号判断
weixin_40532650的博客
12-30 3915
1.由display:none，visibility隐藏的 var display =$('#id').css('display'); if(display == 'none'){ alert("隐藏"); } 2.使用css的text-overflow: ellipsis; 或-webkit-line-clamp: 2;来隐藏的 **在使用-webkit-line-clamp: 2;时，WebkitBoxOrient无法在css等样式文件中编译通过，需要在页面添加 $('#id')..
css文本一行和两行，超出省略表示及超过2行... 展开-收起
MISS_zhang_0110的博客
02-20 1238
CSS文本一行和两行，超出省略表示css 文本一行显示，超出省略号表示css 文本两行显示，超出省略号表示 重点：text-overflow: ellipsis;只对display：inline；起作用 css 文本一行显示，超出省略号表示 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; css 文本两行显示，超出省略号表示 text-overflow: -o-ellipsi
前端实战——完美解决文本框超出内容用“……”表示，鼠标滑过时显示隐藏内容
热门推荐
softwareCraftsman
02-12 1万+
在前台的开发过程中我们通常会遇到这样的问题。内容太多，显示不全，若要全部显示出来的话，又觉得太挤得慌。怎么办？ 如下图所示（让用户看了就会感觉很不爽！） 那么这个时候需求就有了： 1、要求在你内容在超出文本框的时候，需要用省略替代。 2、还能够使得页面的元素自动适应页面的大小进行变化调整。 （再来一个高级一点的需求。） 3、在你的鼠标滑过的时候，将内容放到一个tooltip中显示出来
html+css 面试题总结附答案
铁锤妹妹的博客
11-27 1690
行内元素有哪些? 块级元素有哪些? 块级元素：div p h1 ul li form table 行内元素: a b br i span input select laber strong em img 举５个以上的 HTML5 input 元素 type 属性值 text password button submit reset checkout radio 我们经常用到的语义化标签以及HTML5新增的语义化标签有哪些？ h1-h6 标题内容 p 段落 ul 无序 ol 有序 dl
文本框溢出的部分显示省略号
娓娓道来
07-01 643
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } body{ padding: 30px;s ...
css进行中打点效果的演示代码
09-24
在CSS中，实现“进行中打点效果”是一种常见的动态加载或等待提示方式，它通常由一串省略号（...）组成，每个省略号按照一定的节奏依次出现和消失，形成一种动感的视觉效果。这种效果在网页设计中常用于加载指示、...
CSS3文本框动画输入标签效果.zip
07-05
总的来说，"CSS3文本框动画输入标签效果"是一个结合了前端两大核心技术的优秀示例，展示了如何通过创新的方式提升用户体验。无论是初学者还是经验丰富的开发者，都可以从中学习到如何巧妙地运用CSS3和jQuery来打造...
css 中background 设置文本框背景图 的方法
12-10
在CSS（层叠样式表）中，`background`属性是一个复合属性，用于为HTML元素设置背景效果。这个属性可以一次性设定多个子属性，...如果你在实践中遇到问题，可以查阅相关的CSS教程或在线资源，以获取更多的帮助和灵感。
css3 input文本框动画特效特效代码
03-20
在CSS3中，input文本框动画特效是一种提升用户体验和网页设计视觉吸引力的重要技术。通过巧妙地运用CSS3的属性和方法，我们可以创建出各种各样的动态效果，使文本框在获得焦点、失去焦点或者在用户输入时产生独特的...
CSS实现会发光的输入框input
joyfixing的博客
07-12 1万+
通过input标签创建一个输入框后，当用鼠标点击输入框会发现输入框外围边框会变色且会变得模糊，这是因为浏览器的默认样式在捣蛋，接下来我们自定义focus样式。实现上述效果需要4个步骤 取消浏览器默认样式outline。 设置边框样式、宽度、颜色。 设置边框阴影。 渐变过渡效果 取消浏览器默认样式outline以谷歌浏览器为例，当focus input输入框时浏览器会设置outline: -webki
css+js实现元素内容超过显示区域时以省略号显示隐藏内容，鼠标移动到元素时显示完整内容
web12138的博客
02-10 1111
今天在工作中遇到一个问题，需求要求超出显示区域的内容以省略号显示，鼠标移动到有省略号的记录上时，显示含有完整内容的提示框。刚开始我用的是css的text-overflow:ellipsis加html中的title属性来实现，后来测试时发现此方案在firefox及IE中行不通，因为在firefox和IE中，如果title中含有一长串由数字或字母组成的字符串，并且此字符串一行显示不下时，浏览器会自动截...
CSS高级技巧:自动省略左侧文本
铁锚的CSDN博客
12-21 6449
难以置信! 浏览器和CSS规范居然支持自动省略左侧的文本了。 通过 text-overflow: ellipsis, 搭配固定的 width 属性, 以及overflow: hidden 样式, 就可以实现这样的功能; 能用CSS实现，就不需要编写复杂的 JavaScript 代码来计算字符串宽度, 或者进行截断了. CSS的自动省略特性, 对无障碍环境也非常友好。 text-overflow: ...
CSS 文字超出隐藏，显示省略号，文字垂直显示 内容超出容器时显示滚动条
小肉包的博客
11-23 1052
CSS 文字超出隐藏，显示省略号 效果图： overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
微信小程序的超出部分显示省略号和展开按钮（css方式实现）
XUELUO123456789的博客
04-10 9167
一.使用场景 最近在仿写——起点中文网的微信小程序，在书籍简介中存在一个需求 简介文本超出规定的范围出现省略号以及展开按钮 网上其他做法都是js控制，但是一般开发中，能不写js就不写js，下面我将通过css方式实现此效果 二.方法 思路： 出现省略号，需要用到text-overflow: ellipsis;display: -webkit-box;等 上述样式实现省略号后，剩下最后一个，展开按钮需要出现在省略号后面 如果是在标签后面添加“展开按钮”,此方式行不通，无论怎样添加，省略号都会将后面的内容
前端面试之路一(HTML+CSS面试整理)
weixin_34342207的博客
11-30 619
一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/footer p span/em/strong table/thead/tbody/tr/td ul/ol/li/dl/...
css实现发光的input输入框
草巾冒小子的博客
07-02 1490
鉴于前期工作总结，简单总结一下开发中经常遇到的发光的输入框的UI视觉体验。 聚焦input文本框：边框外围背景伴有明显的动画效果，呈现为虚化，雾化效果。 效果图截图： 案例代码示下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
文本溢出省略号
专注前端开发
10-19 92
&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;jquery文本溢出&lt;/title&gt;&lt;script type="text/javas
css文本框两行省略号
最新发布
09-13
您可以使用CSS的`text-overflow`属性来实现文本框的两行省略号效果。首先，创建一个具有固定高度的容器，然后设置`overflow: hidden`以确保超出容器高度的文本被隐藏。接下来，使用`display: -webkit-box`和`-webkit-line-clamp`属性来限制文本显示的行数为两行，并添加`-webkit-box-orient: vertical`以确保文本垂直排列。最后，设置`text-overflow: ellipsis`来显示省略号。以下是一个示例代码： ```html <div class="textbox"> This is some long text that needs to be truncated after two lines. </div> ``` ```css .textbox { height: 3em; /* 设置容器的高度 */ overflow: hidden; /* 隐藏超出容器高度的文本 */ display: -webkit-box; /* 将文本按照块级元素排列 */ -webkit-line-clamp: 2; /* 限制文本显示的行数为两行 */ -webkit-box-orient: vertical; /* 设置文本垂直排列 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 请注意，这种效果在不同浏览器中的兼容性可能会有所差异，特别是使用了`-webkit-`前缀的属性。您可以根据需要添加其他浏览器前缀或使用CSS预处理器来自动生成适用于不同浏览器的样式代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值