<li></li>列表中显示文字强制不换行,大于li宽度自动隐藏...
2011-10-10 17:10
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属性(特性)
分享到:
相关推荐
在网页设计中,创建一个li列表并实现文字强制不换行,当文字内容超过li元素的宽度时自动隐藏,并在末尾添加省略号,是一种常见的文本显示方式,尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现,...
10. Br:换行标签,用于强制在文本中插入一个换行。 二、特殊符号 1.  :非中断空格,用于在HTML中插入一个不可换行的空格。 2. < 和 >:分别代表小于号和大于号。 3. ":双引号的实体引用。 4. ©...
7. `<ul>`:无序列表标签,用于创建一个不按顺序排列的项目列表,列表项使用`<li>`标签。 8. `<meta>`:元数据标签,提供关于HTML文档的额外信息,如文档的字符集、更新频率等。示例中展示了如何设置页面自动刷新或...
- ` ` 是一个换行标签,用于在文本中强制换行。 3. **标题**: - `<h1> </h1>` 到 `<h6> </h6>` 用于设定不同级别的标题,数字越大,标题越小。 4. **粗体文本**: - `<b> </b>` 用于将文本设置为粗体。 5...
3. **换行标签**:` `是一个单标签,用于在文本中强制换行,不产生新的段落。 4. **水平线标签**:`<hr/>`也是一个单标签,用于在页面中插入一条水平线,常用于分隔内容。 5. **字体样式标签**:`<strong>`使...
- 作用:强制换行,不产生额外的空格。 ### 4. 图像标签 `<img>` - **基本用法**:`图片路径">`,其中`src`属性用于指定图片文件的路径。 - **其他常用属性**: - `alt`:当图片无法加载时显示的文字。 - `width`...
8. **换行**:` `标签用于强制换行。 9. **水平线**:`<hr>`标签用于插入一条水平线。 - 示例:`<hr size="2" width="50%" color="gray" noshade>`,设置水平线的高度、宽度、颜色及是否显示阴影。 ### 列表与...
7. **换行标签 **:` `用于强制换行,但不创建新段落。 8. **缩进标签**:`<blockquote>`用于创建块引用,可以嵌套以增加缩进效果。 9. **预格式化标签**:`<pre>`保持文本的原始格式,常用于展示代码。 10...
` `标签用于强制换行。行的控制还可以通过CSS的`display`属性来实现。 6. **图片标签** `<img>`标签插入图像,`src`属性指定图像的URL,`width`和`height`设定尺寸,`alt`提供替代文本,`align`控制对齐方式,`...
System.out.print() 直接打印,不会自动换行 System.out.printf() 可插入带 % 的输入类型,前两种只可以插入转义符, 不能插入 % 的数据或字符串 在 printf 里面,输出有5个部分 %[argument_index$][flags][width][....
- **换行标签**:` `,用于强制换行。 #### 七、常见的图片格式及其特点 - **JPEG**:适合照片或具有大量颜色渐变的图像。 - **GIF**:支持透明度和动画效果,但色彩数量受限。 - **PNG**:支持高色彩图像和...
- 列表项 `<li>列表项</li>` - 定义列表项 `定义列表项</dt>` - 列表项描述 `列表项描述</dd>` #### 八、图像标记 - **图像**: `图像URL" alt="描述" width="宽度" height="高度" border="边框"/>` - 浏览器...
- **换行标签` `**:强制文本在当前位置换行。 - **标题标签`<h1>`至`<h6>`**:定义不同级别的标题。 - **水平分隔线`<hr>`**:在文档中创建一条水平线。 - **链接标签`<a>`**:创建超链接,属性`href`用于...
- **段落和换行标签**:`<p>`表示段落,` `用于强制文本换行显示。 - **文本格式化标签**:例如`<strong>`(粗体)、`<em>`(斜体)等。 - **和标签**:`<div>`常用于布局,`<span>`用于对文本进行局部样式控制...