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

 溢出属性:   (重要)
 overflow :visible/hidden/scroll/auto/inherit
  值                                    描述
 visible                              默认值。内容不会被修剪,会呈现在元素框之外。
 hidden                             内容会被修剪,并且其余内容是不可见的。
 scroll                               内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
 auto                                 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
 inherit                              规定应该从父元素继承 overflow 属性的值。

overflow-x:hidden;           隐藏横向滚动条
 overflow-y:hidden;           隐藏纵向滚动条

文本单行显示省略号:

1.容器宽度:                      width:value;(px、%都可以)

2.强制文本在一行显示:  white-space:nowrap;

3.溢出内容为隐蔽:         overflow:hidden;

4.溢出文本显示省略号:  text-overflow:ellipsis

原文地址:https://www.cnblogs.com/wjsblog/p/12384962.html

时间: 2024-10-10 09:25:02

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

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

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

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是一个

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

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

超出文本显示省略号

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

(轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p></div> css代码:div{width:200px;/*容器的基本定义*/height:200px; } /* IE下的样

CSS 溢出文本显示省略号的方法(兼容 IE、FF、Chrome)

text-overflow: ellipsis:该属性用于定义文本溢出的显示方式 css代码: .textEllipsis { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; word-break: normal !important;} Chrome浏览器下显示效果及页面布局: IE浏览器下显示效果:

使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题

本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;(其实很久就有了,不过之前都不知道)这个样式可以实现这种效果,而且所有主流浏览器都支持 text-overflow 属性. 于是就用了如下代码 .ellipsis{ width:300px; white-space: nowrap; word-break: break-all; overflow: h

css实现隐藏多余溢出文字并显示省略号

<meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>