在实际应用中,经常需要只显示一行文字,不允许文字换行破坏整体样式的情况。例如‘商品的名称’,‘简介’等等。但是由于显示器的宽度不一样,会出现后台所给文字内容,一行文本容纳不下的情况。溢出的文本如果使用overflow:hidden生硬的给隐藏掉,显示的效果不是很好,这时,溢出的文本就需要使用省略号...来替换。使用js截取有点儿复杂,可直接使用css的属性进行设置,实现该效果。

  需给文本对象添加的css属性如下:

<p class="className">休闲纯色百搭短裤</p>

.className{width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

显示的效果如下:

css限制单行文本输入,超出部分使用...替换的更多相关文章

  1. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  2. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  3. css控制单行文本溢出

    1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidd ...

  4. Java Swing界面编程(18)---单行文本输入组件:JTextField

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xuejiawei123/article/details/27565407 下面的程序与上一例有一点差 ...

  5. CSS实现单行文本溢出显示省略号

    p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...

  6. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  7. css实现单行(多行)文本溢出显示 ...

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...

  8. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

  9. css控制单行或者多行文本超出显示省略号

    1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...

随机推荐

  1. iOS中通讯录的开发

    通讯录开发主要是获取用户手机中的联系人,进而可以在应用中添加好友 一 .如何访问通讯录 (1)在iOS9之前,有两个框架可以访问用户的通讯录 AddressBookUI.framework: 提供了联 ...

  2. UGUI 之Scroll Rect 坑

    由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...

  3. JavaScript 中的类方法,对象方法,Prototype方法

    <script type="text/javascript"> function baseClass() { this.showMsg = function() { a ...

  4. MySql联接算法

    联接算法是MySql数据库用于处理联接的物理策略.在MySql 5.5版本仅支持Nested-Loops Join算法,如果联接表上有索引时,Nested-Loops Join是非常高效的算法.如果有 ...

  5. hdu4833 Best Financing(DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4833 这道题目关键的思想是从后往前dp,dp[i]表示在第i处投资xi能获得的最大收益,其中xi表示从 ...

  6. 项目安排(离散化+DP)

    题目来源:网易有道2013年校园招聘面试二面试题 题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的 ...

  7. MySQL数据类型的验证

    CHAR char (M) M字符,长度是M*字符编码长度,M最大255. 验证如下: mysql)) default charset=utf8; ERROR (): ); use BLOB or T ...

  8. ZOJ Problem Set - 1109 Language of FatMouse

    这道题目最让人头疼的就是该题的input怎么结束,因为它要求输入一个空行的时候则一串字符串输入结束,这就不得不让人绕个弯来解决这个问题. (注:本人习惯于使用C中的字符串操作,但是用到map要求使用s ...

  9. iOS_常用C语言函数

    一.随机数: 1.rand(); 范围:        0-无穷大. 特点:        仅第一次随机,其他次都是和第一次相同.常用于调试. 返回值:     long 实例:        int ...

  10. BroadcastReceiver注册、使用及其权限

    首先声明一个类,此类继承自BroadcastReceiver类,处理Android当中发出的广播事件: public class SMSReceiver extends BroadcastReceiv ...