前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆。

    实现div框四个角都钝角的操作:设置 div : border-radius=10px;

    实现div框一个角的钝角效果 :设置div :border-top-left-radius=10px;

                  border-top-right-radius=10px;  

                  border-bottom-left-radius=10px;

                  border-bottom-right-radius=10px;

    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完美解决这个问题,


如何实现CSS限制字数,超出部份显示点点点...

<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完美解决这个问题,

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->
发布此文章仅为传递网友分享,不代表本站观点,若侵权请联系我们删除,本站将不对此承担任何责任。
 
 

文章评论

 

html实现钝角效果;html实现限制一行字数的显示,超出的部分用省略号(....)来代替的更多相关文章

  1. iOS 7.1 UITableView添加footerView 后 最后一行分割线无法显示

    今天用故事版 遇到个奇怪的问题: 我要用 tbView(tableView)展示写信息.最后一行我要显示些文案什么的.考虑用 footerView ,开心coding ..,show下 哪里有些不对吧 ...

  2. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  3. CSS一行显示,显示不下的用省略号显示

    CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...

  4. 解决TextView在显示文字的时候,一行还没显示满就跳到下一行

    转载请注明:转自 http://blog.csdn.NET/u011176685/article/details/48295185 一.问题描述: Android的TextView在显示文字的时候,如 ...

  5. js效果-多选只能选两项,如果超出自动取消第一次选的

    这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...

  6. css一行内容过多显示省略号

    四个缺一不可. 效果如下图

  7. android中使用afinal一行源码显示网络图片

    下面代码是关于android中使用afinal一行显示网络图片的代码. public class DemoActivity extends FinalActivity { @Override publ ...

  8. css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  9. 摄像机导致的粒子效果混乱出错变成贴图sprite显示在镜头前

    只要把出错的摄像机记的标签改成maincamera问题就消失了!! 我之前一直以为是烘培导致的问题!

随机推荐

  1. dede地图显示最新文章的解决方法

    以DEDECMS5.6为例:sitemap.htm 在/templets/plus/目录里,就算添加了织梦相关标签调用,但却不能显示文章. 这是因为makehtml_map.php不能解析织梦的相关调 ...

  2. springboot mybatis自定义枚举enum转换

    原文链接:https://blog.csdn.net/u014527058/article/details/62883573 一.概述 在利用Spring进行Web后台开发时,经常会遇到枚举类型的绑定 ...

  3. ArrayList深度分析:ArrayList和数组间的相互转换

    一.ArrayList转换为数组ArrayList提供public <T> T[] toArray(T[] a)方法返回一个按照正确的顺序包含此列表中所有元素的数组,返回数组的运行时类型就 ...

  4. 小B的询问 莫队分块

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  5. C++的一种业务分发方案(另类的工厂模式)

    在C++中,传统的业务分发.总要写一大串的switch-case,并且每次添加新业务时.都要在原有的switch-case里加一个分支,这就违反了设计模式中的开放封闭原则. 下面这样的方案,就全然去除 ...

  6. C#工具类之Xml序列化扩展类

    using System; using System.IO; using System.Linq; using System.Runtime.Serialization; using System.T ...

  7. ZPL通用打印类

    using System;using System.Collections.Generic;using System.IO;using System.Runtime.InteropServices;u ...

  8. SElinux学习记录

    1.SELinux:是一种基于域类型模型的强制访问控制安全系统,由NSA编写设计成内核模块包含到内核中,相应的某些安全相关的应用也被打了SE Linux补丁 查看Selinux: ps -Z #查看S ...

  9. Vue 中怎么发起请求(二)

    fetch 是新一代XMLHttpRequest的一种替代方案.无需安装其他库.可以在浏览器中直接提供其提供的api轻松与后台进行数据交互. 基本用法: 1 fetch(url,{parmas}).t ...

  10. CSS background-size contain 与cover的区别

    最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...