如何让溢出容器的文本显示为省略号?(CSS)

  在实际的Web开发当中,经常需要将溢出容器边界的文本显示为省略号,其实这非常简单,设置几个CSS属性就可以达到效果,并且兼容各大浏览器,包括PC端和移动端。

  1、容器必须固定宽度,单位可以是像素或百分比;

  2、禁止容器内的文本换行;

  3、将溢出的内容隐藏掉;

  4、将溢出的内容替换为省略号。

  只要记住以上四个步骤就很容易想起代码了,我自己就是这样去记的。

  示例代码:

  .test{ width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

时间: 2024-08-03 18:21:43

如何让溢出容器的文本显示为省略号?(CSS)的相关文章

多行溢出 ,文本显示为省略号如何写

多行溢出 ,文本显示为省略号怎么写? 我想请问下,多行溢出 ,文本显示为省略号怎么写啊??555一行的可以,多行的就不行了哇~ ------解决思路----------------------用js获得一下这个div里文字的个数,当超过一定数量后substring一下,在加个...覆盖div原来的值试试貌似专门有个样式实现这个功能 忘掉了 ------解决思路----------------------设定一个宽度:设置css样式: text-overflow:ellipsis; white-s

关于溢出、单行文本显示省略号

 溢出属性:   (重要) overflow :visible/hidden/scroll/auto/inherit  值                                    描述 visible                              默认值.内容不会被修剪,会呈现在元素框之外. hidden                             内容会被修剪,并且其余内容是不可见的. scroll                            

如何让超出范围的文本自动显示为省略号(CSS)

溢出文本显示省略号的效果: white-space:nowrap;  强制文本在一行显示 overflow:hidden;   溢出内容为隐藏 text-overflow:ellipsis;  当对象内文本溢出时显示省略标记(...) 版权声明:本文为博主原创文章,未经博主允许不得转载.

超过容器的文字显示为省略号

当文字的长度超过容器的边框时,若想要显示多余的内容为省略号时,我们可以这么设置 .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意到white-space与overflow的条件不可少.

css文本超出部分省略号&CSS强制换行总结

word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了. 支持版本:IE5以上 该行为与亚洲语言的 normal 相同.也允许非亚洲语言文本行的任意字内断开.该值适合包含一些非亚洲

超出文本显示省略号

对于大多数刚入门的程序员,都是不是太注重代码的细节,也就是写出来的代码不是太完善.有些我们设置的标签能放下6个字,后期我们又要加多几个字,又不能改变标签的宽度,又要保持外观样式的美观性,那我们怎么办的?下面我就给大家介绍一种超出文本显示用省略号代替的一种方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号&

css text-overflow溢出文本显示省略号

<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象内文本溢出时显示省略标记</nobr></div> 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)

css 溢出文本显示省略号

这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符,但 是通过控制字数来截取的话还是存在一个大问题的,因为中文和英文的字符宽度问题,这个字数不好控制,而且通用性较差.那么有没有更好的方法呢,比如直接用 CSS来解决的,当然是有的. text-overflow是一个

新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用‘...’来代替, 我一想 这简单啊 只要给div加上text-overflow:ellipsis;属性就好了呗, 结果 怎么调也不行,你说把我压抑的啊 经过一阵查终于找到原因出在哪里里 原来text-overflow:ellipsis;的属性 得需要另外两个属性的配合才能实现 这俩分别是 over