html/css实现文字自动换行,超出部分出现(...)

时间:2022-11-26 23:03:30

PS:这是我在别人博客copy下来的

做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时,你会发现这些文字不会自动换行,如果控制的不对,它有可能冲出父元素…

原因是: 
  英书字母之间如果没有空格,系统以为是一个单词,就不会BUTO换行。汉字就没有这种情况。

  • 一行文字

当有一行文字的时候,如果想让超出部分出现(…),可以这样写:

.wrap{

overflow: hidden;

                  text-overflow: ellipsis;

white-space: nowrap;

width: 118px;

}

  • 多行文字

当有多行文字的时候,可以这样写:

.wrap{

width:220px;

             height: 72px;
             overflow: hidden;
             text-overflow: ellipsis;
            word-break: break-all;

}

html/css实现文字自动换行,超出部分出现(...)的更多相关文章

  1. CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  2. css控制文字自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换 行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  3. css 实现文字自动换行切同行元素高度自适应

    1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...

  4. css实现文字内容超出显示省略号

    white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...

  5. css控制文字长度,超出长度显示&period;&period;&period;

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  6. CSS控制文字显示一行,超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  7. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  8. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  9. css限制文字显示字数长度,超出部分自动用省略号显示&comma;防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

随机推荐

  1. 一步步开发自己的博客 &period;NET版(11、Web&period;config文件的读取和修改)

    Web.config的读取 对于Web.config的读取大家都很属性了.平时我们用得比较多的就是appSettings节点下配置.如: 我们对应的代码是: = ConfigurationManage ...

  2. Android和Linux应用综合对比分析

    原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...

  3. Java集合源码分析(五)HashSet&lt&semi;E&gt&semi;

    HashSet简介 HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素. HashSet源 ...

  4. Mono for android真难用

    最近要写个Android小项目,真的很少,几个按钮发送tcp或udp而已. 作为.net程序员当前是c#当先,Mono for android真是好,直接用c#一切都是那么熟悉,但发布时问题来了,需几 ...

  5. SQL Server Merge语句的使用

    Merge关键字在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小精悍:”根据与源表联接的结果,对目标表执行插 ...

  6. C&num; 添加&period;DLL 出错的解决方法

    解决方法:    1.     注册组件:       运行--cmd--regsvr32 dll的绝对路径名(例如: regsvr32  C:\bin\EFGateWayOfERP.dll) 如果注 ...

  7. AR增强现实 Augmented Reality

    增强现实(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上对应图像的技术,这样的技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动.这样的技术最早于19 ...

  8. Jquery插件的编写和使用

    第七章 Jquery插件的编写和使用    插件的定义: 插件也称为扩展,是一种遵循一定规范的应用程序接口编写出来的程序. 下面是Jquery插件的编写很使用:要查看请点击:Jquery插件的编写很使 ...

  9. 有关&lt&semi;action android&colon;name&equals;&quot&semi;android&period;intent&period;action&period;DELETE&quot&semi; &sol;&gt&semi;

    今天看一个病毒样本时遇到了这个Action,位于一个Activity节点下 通过真机测试与导师指导发现,这个Action的作用就相当于把其所在的应用加入到了“系统卸载程序”列表,当你卸载系统中的任一应 ...

  10. python 自动化之路 day 08&lowbar;2 网络编程

    本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...