`
robinqu
  • 浏览: 90295 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

CSS 单行益处截字

    博客分类:
  • css
阅读更多
文字益处,浏览者习惯看到“...”来提示他们这行字还有其他部分,但是由于空间不够,网页帮你隐藏起来了。

这种效果除了在服务器端预处理,还可以用JS来折腾。其实CSS也可以实现,只是浏览器兼容性问题又让你不得好死……

在这里发现一个思路很好的解决方法
http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html

我也是遇到这个问题找帖子来救急的,FF下还是没搞定,但是按照这个思路肯定是可以的。以后再研究。

html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>


css代码:
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}

/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}
分享到:
评论

相关推荐

    css属性行高line-height的用法详解

    在CSS中,行高不仅仅影响单行文字的显示,对于多行文字内容也同样适用。当需要对多行文字进行垂直居中时,常用的方法是将行高设置为与容器的固定高度相同。例如,使用.jb51{height:25px; line-height:25px}可以实现...

    css3学习笔记(新增功能,粗略版本)

    - **文字溢出省略号**:可以通过以下 CSS 规则实现单行或多行文本溢出时显示省略号: - `white-space: nowrap;` - `overflow: hidden;` - `text-overflow: ellipsis;` #### HTML5 新增的语义化标签 - **`...

    JS,ASPX,CSS文件内注释删除工具

    注释通常以特定的符号开始,如JavaScript中的`//`单行注释和`/* ... */`多行注释,CSS中的`/* ... */`以及ASPX中的`&lt;%-- ... --%&gt;`等。 3. **反馈支持**: 如果在使用过程中遇到任何问题或者有改进的建议,可以...

    raster:栅格-简单CSS网格系统

    在实际应用中,使用raster这样的CSS网格系统可以带来以下好处: 1. **一致性**:在整个网站中保持布局的一致性,提升用户体验。 2. **响应式**:通过定义不同断点,实现跨设备的适配,确保在手机、平板和桌面等不同...

    结合CSS3的新特性来总结垂直居中的实现方法

    这样做的好处是容器内部的内容(如文本、图片等)会自动垂直居中。为了水平居中,还可以添加`text-align: center;`属性。这种方法简单且不需要额外的HTML标记,适合表格布局。 4. 利用CSS3的新属性`transform`实现...

    前端开发规范.docx

    这样做的好处是提高了代码的可读性和可维护性,使得开发者能够更专注于各自领域的任务。 2. **缩进统一**:为了保持代码整洁,通常推荐使用两个空格进行缩进,避免混合使用Tab和空格,以防止因不同的编辑器设置导致...

    Html注释 Html中标记文字注释的符号

    HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员...–注释内容–&gt;2、//注释内容 (在css或javascript中插入单行注释)3、/*注释内容*/ (在css或javas

    teach-me-sass:快速了解 SCSS 的好处,然后是一些

    SCSS,全称为“Sassy CSS”,是CSS预处理器的一种,它是CSS的超集,意味着任何有效的CSS代码也都是有效的SCSS代码。SCSS引入了变量、嵌套规则、混合(mixins)、函数等特性,使得CSS编写变得更加简洁、模块化和可...

    quavaTech

    SCSS(Sassy CSS)是CSS的一个预处理器,它扩展了CSS的语法,引入了变量、嵌套规则、混合、函数等特性,使得CSS的编写更加模块化、可维护。 **SCSS的基本概念与特点:** 1. **变量(Variables)**:SCSS允许我们...

    JavaScript入门-教案1.docx

    放在`&lt;head&gt;`部分的JavaScript代码会被浏览器优先执行,适合用来进行页面初始化工作,如设置CSS样式。放在`&lt;body&gt;`部分的JavaScript代码则会在浏览器遇到该语句时执行,适用于响应用户事件的函数。 JavaScript语句...

    Markdown 教程.rar

    - **代码块**:用三个反引号(```)包围多行代码,单行代码可以用一个反引号(`)包裹。 - **链接**:`[显示文本](链接地址)`,如 `[Markdown教程](https://example.com/markdown-tutorial)`。 - **图片**:`![](图片...

    编写可维护的JavaScript(中文)

    2.1 单行注释 2.2 多行注释 2.3 使用注释 2.3.1 难于理解的代码 2.3.2 可能被误认为错误的代码 2.3.3 浏览器特性hack 2.4 文档注释 第3章 语句和表达式 3.1 花括号的对齐方式 3.2 块语句间隔 3.3 switch...

    WEB设计大全

    颜色、图像及背景 &lt;br&gt;11.1 颜色基础 &lt;br&gt;11.2 Web上的颜色 ...CSS 和颜色 &lt;br&gt;11.2.7 颜色的再生问题 &lt;br&gt;11.3 颜色与可用性 &lt;br&gt;11.3.1 颜色的含义 &lt;br&gt;11.3.2 对比度问题 &lt;br&gt;11.4 ...

    WEB设计大全(part2)

    颜色、图像及背景 &lt;br&gt;11.1 颜色基础 &lt;br&gt;11.2 Web上的颜色 ...CSS 和颜色 &lt;br&gt;11.2.7 颜色的再生问题 &lt;br&gt;11.3 颜色与可用性 &lt;br&gt;11.3.1 颜色的含义 &lt;br&gt;11.3.2 对比度问题 &lt;br&gt;11.4 ...

    最好的asp CMS系统科讯CMSV7.0全功能SQL商业版,KesionCMS V7.0最新商业全能版-免费下载

    8、自定义字段功能:可自由设置字段类型、字段类型(单行文本、多行文本、下拉列表、数字、日期、单选按钮、多选按钮、电子邮箱、文件)、表单选项限制(功能启用时间限制、是否只允许会员提交、每个会员是否只允许...

    Qt界面开发总结

    使用资源文件路径的好处在于,资源文件可以被直接打包进最终的应用程序中,无需外部文件存在,从而简化了部署过程。 ##### 样式表设置背景 除了使用上述方法外,还可以利用Qt的样式表(QSS)机制来设置背景图片。...

    教学实施大纲(javaWEB方向)

    - **使用注释对代码进行解释说明**:注释有助于提高代码可读性,分为单行注释(//)、多行注释(/* */)和文档注释(/** */)。 - **了解Java中常用的数据类型**:Java支持多种数据类型,包括基本类型(如int、...

    alert-prompt-js:Mencoba模态警报和提示

    1. `alert()`: 这是最简单的对话框,用于显示单行文本消息,并包含一个“确定”按钮关闭它。例如: ```javascript window.alert('这是一个模态警报信息'); ``` `alert()`常用于告知用户不可忽略的重要信息,因为它会...

Global site tag (gtag.js) - Google Analytics