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. feign调用过程注意事项

    Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个接口,并在 ...

  2. jquery实现淘宝动态图展示商品

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. web 服务器安全防范

    apache 关闭目录 配置文件:安装目录/Apache/conf/httpd.conf <Directory /> #默认就会把/ 的目录暴漏出来:关闭方法: Options -Inde ...

  4. 洛谷 P2680 运输计划(NOIP2015提高组)(BZOJ4326)

    题目背景 公元 \(2044\) 年,人类进入了宇宙纪元. 题目描述 公元\(2044\) 年,人类进入了宇宙纪元. L 国有 \(n\) 个星球,还有 \(n-1\) 条双向航道,每条航道建立在两个 ...

  5. MNIST数据集分类简单版本

      import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist = ...

  6. Logistic Regression-Cost Fuction

    1. 二分类问题 样本:  ,训练样本包含  个: 其中  ,表示样本 包含 个特征:  ,目标值属于0.1分类: 训练数据:  输入神经网络时样本数据的形状: 目标数据的形状: 2. logisti ...

  7. VBS修改本机的账号密码

    On Error Resume Next strComputer = "." Set WshShell = WScript.CreateObject("WScript.S ...

  8. Java中filter内处理重定向遇到的问题

    这是在Java中filter内处理重定向遇到的问题.本意是写一个做URL rewrite 的filter,来重写URL,同时在处理登陆过程中要杀掉当前session,创建新session来代替. 1. ...

  9. ssh无密码登录和scp无密码拷贝

    目的:在A主机上无密码登录B主机 方法: A主机生成密钥:ssh-keygen -t rsa 将密钥复制到B主机:cat ~/.ssh/id_rsa.pub | ssh root@B 'cat > ...

  10. sql 死锁

    先上代码connectA: BEGIN TRAN UPDATE dbo.Student SET Sorce= WHERE id= waitfor delay '00:00:05' SELECT * F ...