文字益处,浏览者习惯看到“...”来提示他们这行字还有其他部分,但是由于空间不够,网页帮你隐藏起来了。
这种效果除了在服务器端预处理,还可以用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中,行高不仅仅影响单行文字的显示,对于多行文字内容也同样适用。当需要对多行文字进行垂直居中时,常用的方法是将行高设置为与容器的固定高度相同。例如,使用.jb51{height:25px; line-height:25px}可以实现...
- **文字溢出省略号**:可以通过以下 CSS 规则实现单行或多行文本溢出时显示省略号: - `white-space: nowrap;` - `overflow: hidden;` - `text-overflow: ellipsis;` #### HTML5 新增的语义化标签 - **`...
注释通常以特定的符号开始,如JavaScript中的`//`单行注释和`/* ... */`多行注释,CSS中的`/* ... */`以及ASPX中的`<%-- ... --%>`等。 3. **反馈支持**: 如果在使用过程中遇到任何问题或者有改进的建议,可以...
在实际应用中,使用raster这样的CSS网格系统可以带来以下好处: 1. **一致性**:在整个网站中保持布局的一致性,提升用户体验。 2. **响应式**:通过定义不同断点,实现跨设备的适配,确保在手机、平板和桌面等不同...
这样做的好处是容器内部的内容(如文本、图片等)会自动垂直居中。为了水平居中,还可以添加`text-align: center;`属性。这种方法简单且不需要额外的HTML标记,适合表格布局。 4. 利用CSS3的新属性`transform`实现...
这样做的好处是提高了代码的可读性和可维护性,使得开发者能够更专注于各自领域的任务。 2. **缩进统一**:为了保持代码整洁,通常推荐使用两个空格进行缩进,避免混合使用Tab和空格,以防止因不同的编辑器设置导致...
HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员...–注释内容–>2、//注释内容 (在css或javascript中插入单行注释)3、/*注释内容*/ (在css或javas
SCSS,全称为“Sassy CSS”,是CSS预处理器的一种,它是CSS的超集,意味着任何有效的CSS代码也都是有效的SCSS代码。SCSS引入了变量、嵌套规则、混合(mixins)、函数等特性,使得CSS编写变得更加简洁、模块化和可...
SCSS(Sassy CSS)是CSS的一个预处理器,它扩展了CSS的语法,引入了变量、嵌套规则、混合、函数等特性,使得CSS的编写更加模块化、可维护。 **SCSS的基本概念与特点:** 1. **变量(Variables)**:SCSS允许我们...
放在`<head>`部分的JavaScript代码会被浏览器优先执行,适合用来进行页面初始化工作,如设置CSS样式。放在`<body>`部分的JavaScript代码则会在浏览器遇到该语句时执行,适用于响应用户事件的函数。 JavaScript语句...
- **代码块**:用三个反引号(```)包围多行代码,单行代码可以用一个反引号(`)包裹。 - **链接**:`[显示文本](链接地址)`,如 `[Markdown教程](https://example.com/markdown-tutorial)`。 - **图片**:`![](图片...
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...
颜色、图像及背景 <br>11.1 颜色基础 <br>11.2 Web上的颜色 ...CSS 和颜色 <br>11.2.7 颜色的再生问题 <br>11.3 颜色与可用性 <br>11.3.1 颜色的含义 <br>11.3.2 对比度问题 <br>11.4 ...
颜色、图像及背景 <br>11.1 颜色基础 <br>11.2 Web上的颜色 ...CSS 和颜色 <br>11.2.7 颜色的再生问题 <br>11.3 颜色与可用性 <br>11.3.1 颜色的含义 <br>11.3.2 对比度问题 <br>11.4 ...
8、自定义字段功能:可自由设置字段类型、字段类型(单行文本、多行文本、下拉列表、数字、日期、单选按钮、多选按钮、电子邮箱、文件)、表单选项限制(功能启用时间限制、是否只允许会员提交、每个会员是否只允许...
使用资源文件路径的好处在于,资源文件可以被直接打包进最终的应用程序中,无需外部文件存在,从而简化了部署过程。 ##### 样式表设置背景 除了使用上述方法外,还可以利用Qt的样式表(QSS)机制来设置背景图片。...
- **使用注释对代码进行解释说明**:注释有助于提高代码可读性,分为单行注释(//)、多行注释(/* */)和文档注释(/** */)。 - **了解Java中常用的数据类型**:Java支持多种数据类型,包括基本类型(如int、...
1. `alert()`: 这是最简单的对话框,用于显示单行文本消息,并包含一个“确定”按钮关闭它。例如: ```javascript window.alert('这是一个模态警报信息'); ``` `alert()`常用于告知用户不可忽略的重要信息,因为它会...