li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap; //强制不换行
overflow:hidden; //自动隐藏文字
text-overflow: ellipsis; //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}
涉及关键属性的语法:
1、语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
2、
语法:
overflow : visible | auto | hidden | scroll
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
3、
语法:
white-space : normal | pre | nowrap
参数:
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)
来自: http://hi.baidu.com/xiaowuphp/blog/item/0c4bef219181b4a94723e85e.html
分享到:
相关推荐
在网页设计中,创建一个li列表并实现文字强制不换行,当文字内容超过li元素的宽度时自动隐藏,并在末尾添加省略号,是一种常见的文本显示方式,尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现,...
- **加粗显示**:`<b>...</b>`,注意该标签不建议使用,因为其语义不明确,推荐使用`<strong>...</strong>`或`<mark>...</mark>`。 - **斜体显示**:`<i>...</i>`,同样建议使用更具语义的`<em>...</em>`。 - **...
- 示例:`<table border="1"><tr><th>表头</th><td>单元格</td></tr><tr><td>单元格</td></tr></table>` - 表格的其他属性如`align`、`cellspacing`等可用于进一步定制表格样式。 ### 链接与导航 12. **超链接**...
- **换行标签**:`<br/>`,用于强制换行。 #### 七、常见的图片格式及其特点 - **JPEG**:适合照片或具有大量颜色渐变的图像。 - **GIF**:支持透明度和动画效果,但色彩数量受限。 - **PNG**:支持高色彩图像和...
- `<br/>` 是一个换行标签,用于在文本中强制换行。 3. **标题**: - `<h1> </h1>` 到 `<h6> </h6>` 用于设定不同级别的标题,数字越大,标题越小。 4. **粗体文本**: - `<b> </b>` 用于将文本设置为粗体。 5...
- 列表项 `<li>列表项</li>` - 定义列表项 `<dt>定义列表项</dt>` - 列表项描述 `<dd>列表项描述</dd>` #### 八、图像标记 - **图像**: `<img src="图像URL" alt="描述" width="宽度" height="高度" border=...
6. `<li>`:列表项标签,用于定义无序列表`<ul>`或有序列表`<ol>`中的每个条目。 7. `<ul>`:无序列表标签,用于创建一个不按顺序排列的项目列表,列表项使用`<li>`标签。 8. `<meta>`:元数据标签,提供关于HTML...
7. **换行标签<br>**:`<br>`用于强制换行,但不创建新段落。 8. **缩进标签<blockquote>**:`<blockquote>`用于创建块引用,可以嵌套以增加缩进效果。 9. **预格式化标签<pre>**:`<pre>`保持文本的原始格式,常...
`<br>`标签用于强制换行。行的控制还可以通过CSS的`display`属性来实现。 6. **图片标签** `<img>`标签插入图像,`src`属性指定图像的URL,`width`和`height`设定尺寸,`alt`提供替代文本,`align`控制对齐方式,`...
3. **换行标签**:`<br/>`是一个单标签,用于在文本中强制换行,不产生新的段落。 4. **水平线标签**:`<hr/>`也是一个单标签,用于在页面中插入一条水平线,常用于分隔内容。 5. **字体样式标签**:`<strong>`使...
- **换行标签`<br>`**:强制文本在当前位置换行。 - **标题标签`<h1>`至`<h6>`**:定义不同级别的标题。 - **水平分隔线`<hr>`**:在文档中创建一条水平线。 - **链接标签`<a>`**:创建超链接,属性`href`用于...
- **段落和换行标签**:`<p>`表示段落,`<br/>`用于强制文本换行显示。 - **文本格式化标签**:例如`<strong>`(粗体)、`<em>`(斜体)等。 - **<div>和<span>标签**:`<div>`常用于布局,`<span>`用于对文本进行...
1. 无序列表(ul):使用<ul>和<li>标签创建无序列表,列表项前默认带有小黑点,可以通过list-style-type属性改变样式。 2. 有序列表(ol):使用<ol>和<li>标签创建有序列表,列表项前有顺序标记,可通过type属性...
byte > short > int > long > float > double char 」 注意:默认类型转换(自动类型提升)会丢失精度,但只有三种情况: int>float; long>float; long>double. 看一下他们的有效位就明白。 二进制是无法精确的...