css限制单行文本输入,超出部分使用...替换
在实际应用中,经常需要只显示一行文字,不允许文字换行破坏整体样式的情况。例如‘商品的名称’,‘简介’等等。但是由于显示器的宽度不一样,会出现后台所给文字内容,一行文本容纳不下的情况。溢出的文本如果使用overflow:hidden生硬的给隐藏掉,显示的效果不是很好,这时,溢出的文本就需要使用省略号...来替换。使用js截取有点儿复杂,可直接使用css的属性进行设置,实现该效果。
需给文本对象添加的css属性如下:
<p class="className">休闲纯色百搭短裤</p>
.className{width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
显示的效果如下:
css限制单行文本输入,超出部分使用...替换的更多相关文章
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
- css控制单行文本溢出
1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidd ...
- Java Swing界面编程(18)---单行文本输入组件:JTextField
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xuejiawei123/article/details/27565407 下面的程序与上一例有一点差 ...
- CSS实现单行文本溢出显示省略号
p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- css实现单行(多行)文本溢出显示 ...
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...
- css单行文本及多行文本溢出显示省略号
关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string; 该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...
- css控制单行或者多行文本超出显示省略号
1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...
随机推荐
- iOS中通讯录的开发
通讯录开发主要是获取用户手机中的联系人,进而可以在应用中添加好友 一 .如何访问通讯录 (1)在iOS9之前,有两个框架可以访问用户的通讯录 AddressBookUI.framework: 提供了联 ...
- UGUI 之Scroll Rect 坑
由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...
- JavaScript 中的类方法,对象方法,Prototype方法
<script type="text/javascript"> function baseClass() { this.showMsg = function() { a ...
- MySql联接算法
联接算法是MySql数据库用于处理联接的物理策略.在MySql 5.5版本仅支持Nested-Loops Join算法,如果联接表上有索引时,Nested-Loops Join是非常高效的算法.如果有 ...
- hdu4833 Best Financing(DP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4833 这道题目关键的思想是从后往前dp,dp[i]表示在第i处投资xi能获得的最大收益,其中xi表示从 ...
- 项目安排(离散化+DP)
题目来源:网易有道2013年校园招聘面试二面试题 题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的 ...
- MySQL数据类型的验证
CHAR char (M) M字符,长度是M*字符编码长度,M最大255. 验证如下: mysql)) default charset=utf8; ERROR (): ); use BLOB or T ...
- ZOJ Problem Set - 1109 Language of FatMouse
这道题目最让人头疼的就是该题的input怎么结束,因为它要求输入一个空行的时候则一串字符串输入结束,这就不得不让人绕个弯来解决这个问题. (注:本人习惯于使用C中的字符串操作,但是用到map要求使用s ...
- iOS_常用C语言函数
一.随机数: 1.rand(); 范围: 0-无穷大. 特点: 仅第一次随机,其他次都是和第一次相同.常用于调试. 返回值: long 实例: int ...
- BroadcastReceiver注册、使用及其权限
首先声明一个类,此类继承自BroadcastReceiver类,处理Android当中发出的广播事件: public class SMSReceiver extends BroadcastReceiv ...