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

多行溢出 ,文本显示为省略号怎么写?

我想请问下,多行溢出 ,文本显示为省略号怎么写啊??
555一行的可以,多行的就不行了哇~

------解决思路----------------------
用js获得一下这个div里文字的个数,当超过一定数量后substring一下,在加个...覆盖div原来的值试试
貌似专门有个样式实现这个功能 忘掉了 
------解决思路----------------------
设定一个宽度;
设置css样式:
 text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
这里有个缺陷就是,ie7以下的浏览器不会省略号显示,只是自动截断文字~

比较完美的实现方法是用js 不过能用样式实现的最好还是用样式吧~
你试试~~ 
------解决思路----------------------
你既然都有firebug,你看一下它右边的计算出的样式不就有了吗 
------解决思路----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css控制溢出内容 用省略号代替显示</title>
<style>
span {
display:block;
width:300px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}

</style>
</head>
<body>
<span>  Windows Server 2003系统的DNS服务器实现泛域名解析很简单,它允许使用“*”字符作为主机名称,只要在“eeeey.net”区域中创建一个名称为“*”的主机记录即可,过程非常简单。右键单击“eeeey.net”区域,在弹出的菜单中选择“新建主机”在“新建主机”对话框的“名称”栏中输入“*”,“IP地址”栏中输入“192.168.0.1”,最后单击“添加主机”按钮即可。
</span>
</body>

时间: 2024-10-13 00:30:35

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

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

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

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

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

css 溢出文本显示省略号

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

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

在实际的Web开发当中,经常需要将溢出容器边界的文本显示为省略号,其实这非常简单,设置几个CSS属性就可以达到效果,并且兼容各大浏览器,包括PC端和移动端. 1.容器必须固定宽度,单位可以是像素或百分比: 2.禁止容器内的文本换行: 3.将溢出的内容隐藏掉: 4.将溢出的内容替换为省略号. 只要记住以上四个步骤就很容易想起代码了,我自己就是这样去记的. 示例代码: .test{ width:100px; white-space:nowrap; overflow:hidden; text-over

用JS解决多行溢出文本的省略问题

前言 在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支持了.但是多行文本,目前支持webkit内核的css样式 -webkit-line-clamp 可以做到,但它针对火狐浏览器就行不通了.这就是本文要解决的问题. css解决方案(可跳过) 如果上网搜索[多行文本省略],除了上文提到的css样式控制,找到的答案都是做固定位置的遮盖,而且能发现的是,目前

当文本溢出时显示为省略号

当元素设置固定宽度之后,如果元素内的文本超出宽度之后将其设置为省略号效果的方法: text-overflow 属性规定当文本溢出包含元素时发生的事情. 语法 text-overflow: clip|ellipsis|string; 值 描述   clip 修剪文本.   ellipsis 显示省略符号来代表被修剪的文本.   string 使用给定的字符串来代表被修剪的文本. white-space 属性设置如何处理元素内的空白. 可能的值 值 描述 normal 默认.空白会被浏览器忽略. p

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

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

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浏览器下显示效果:

(轉)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下的样