CSS实现限制字数功能

Html代码

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>

效果：

语法：

text-overflow : clip | ellipsis

参数：

clip : 　不显示省略标记（...），而是简单的裁切

（clip这个参数是不常用的！）

ellipsis : 　当对象内文本溢出时显示省略标记（...）

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

示例：

div { text-overflow : clip; }

text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，

Html代码

white-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!-- 就这三句,,,嘿嘿....->

转载于:https://www.cnblogs.com/ranran/p/3893646.html

CSS实现限制字数功能相关推荐

微信小程序（上传照片功能、统计字数功能）
微信小程序仿淘宝申请界面中的"申请描述" 效果图:(上传照片功能.统计字数功能) .wxml : <view class="apply-describe" ...
html5QQ浏览器页面引导模板,CSS实现QQ浏览器功能
知识点 1.结合fullpage.js实现全屏滚动 2.CSS中linear-gradient() 函数用于创建一个线性渐变的 "图像". background-image: li ...
html+css+js实现抽奖功能
html+css+js实现抽奖功能一.代码 <!DOCTYPE html> <html lang="en"> <head><meta c ...
用html css JavaScript写一个功能全面的王者荣耀轮播图（仿淘宝京东轮播图）通俗易懂
首先分析一下案例需求: 1.鼠标经过就显示隐藏左右按钮 2.动态生成小圆圈有几张图片,就生成几个小圆圈 3.点击小圆圈,移动图片当然移动的是 ul(大盒子) 4.点击左右按钮, 图片滚动 ...
html添加友情链接,WordPress利用css添加“友情链接”功能
使用WordPress建站的话,一般都需要添加友友情链接,它在wordpress站点中,一般都是通过"小工具"来插入实现的.有的主题自带"友情链接"小工具,但也 ...
HTML,CSS,JS完成购物车功能
这是我们要完成的购物车界面初始状态,当我选中某件商品时,总数量栏,总价栏显示默认数量和总价. 当我点击全选按钮时,所有的复选框都要被我选到.当我取消全选按钮时,所有商品都要取消选中状态. 当购物车处 ...
HTML+CSS+JS实现计算机功能
本文运用前端代码实现一个简单的计算器界面,并通过JS实现了基本的运算功能.(加.减.乘.除.清屏/退格.取余.取倒) 需要源代码的可以加下面的QQ群,里面有各种学习资料,期待大家的加入! 点我进群 ...
css实现滚动条美化功能
最近在给客户做一个运维管理平台,前端有个地方的滚动条特别丑,当时也没在意这些细节,项目上线几个月后我实在受不了这个滚动条了,我在网上东找西找,轻轻松松改好了. 一.美化滚动条CSS /*定义滚动条高宽 ...
小程序css样式+自定义组件+功能
代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen.git 微信小程序实现图片文字二维码组合拼接成一张图片,下载到手机相册思路:1下载网络图片,2 ...
用纯CSS实现文字闪亮功能
话不多说,直接上代码 html代码 <p class="shining">闪亮文字登场,GOGOGO~~~</p> css代码 <style>b ...

CSS实现限制字数功能

CSS实现限制字数功能相关推荐

最新文章

热门文章