text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。语法:

但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:

同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。语法:

normal为浏览器默认值,break-word设置在长单词URL地址内部进行换行,此属性不常用,用浏览器默认值即可。

CSS3控制单行文本的溢出的更多相关文章

  1. css控制单行文本溢出

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

  2. css3实现单行文本溢出显示省略号

    文本超出一定宽度让其隐藏,以省略号替代 width:200px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 如下图

  3. CSS3单行文本两端对齐

    CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...

  4. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  5. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

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

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

  7. css单行文本和多行文本溢出实现省略号显示

    1.单行文本溢出 文本内容 <div class="singleLine"> HelloWorldHelloWorldHelloWorldHelloWorldHello ...

  8. css3实现超出文本指定行数(指定文本长度)用省略号代替

    测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  9. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

随机推荐

  1. urlencode编码问题(以及urlparse) 转

    网址链接中的中文编码 中文的gbk(GB2312)编码: 一个汉字对应两组%xx,即%xx%xx 中文的UTF-8编码: 一个汉字对应三组%xx,即%xx%xx%xx 可以利用百度进行URL编码解码 ...

  2. LeetCode231.2的幂

    231.2的幂 描述 给定一个整数,编写一个函数来判断它是否是 2 的幂次方. 示例 示例 1: 输入: 1 输出: true 解释: 2^0 = 1 示例 2: 输入: 16 输出: true 解释 ...

  3. 教你搭建SpringSecurity3框架(附源码)

    源码下载地址:http://pan.baidu.com/s/1qWsgIg0 一.web.xml <?xml version="1.0" encoding="UTF ...

  4. 补档 Codeblocks下的文件标题栏(标签)显示方法

    可能在以下链接也能看到这篇文档 我知道很多人都不知道这个到底叫啥,还不如直接一点: 文件标题栏 就是如下的效果. 解决办法: 在左上角第三个view下,打开后取消Hide editor tabs 选项 ...

  5. SPOJ - MAXXOR

    依然是异或运算,这次是限制L,R范围内挑2个数使其异或值最大 如果r最高为是pos,那最理想状态当然是(1ll<<pos+1)-1 只有2个数如果凑近最理想的状态?直接找紧挨着的一个就好, ...

  6. npm install 卡住的时候的处理

    [From] http://www.eguidedog.net/doc/what-to-do-when-npm-install-hangs.php 翻译一下,npm install 经常卡在下载某个包 ...

  7. for( in ) IE下兼容问题

    在JS 中 for in 常用于遍历对象的可枚举属性,包括原型链上的属性.然而for_in在IE < 9下可能会出现问题. for_in要出现问题必须满足两个条件:  1:IE < 9; ...

  8. PIE SDK图层树伙伴控件示例

    1.  功能简介 TocControl控件的主要作用是显示当前加载的图层有哪些.采用什么样的符号等,目的是使用户对当前加载的数据和结构有一个总体的把握.与之相关联的伙伴控件有MapControl,Pa ...

  9. html简单布局

    转载:https://jingyan.baidu.com/article/ca41422f7e52831eae99eda2.html

  10. Python学习 day07

    一.关于解决问题的思路 1.删除列表中索引为单数的元素. 别人的思路: 利用切片 li = [11, 22, 33, 44, 55] li = li[::2] print(li) 思考:虽然学了pyt ...