`
sibyl_pisces
  • 浏览: 146109 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

<li></li>列表中显示文字强制不换行,大于li宽度自动隐藏

    博客分类:
  • css
 
阅读更多

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

 

分享到:
评论

相关推荐

    ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

    在网页设计中,创建一个li列表并实现文字强制不换行,当文字内容超过li元素的宽度时自动隐藏,并在末尾添加省略号,是一种常见的文本显示方式,尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现,...

    web前端小知识点(最初)

    - **加粗显示**:`&lt;b&gt;...&lt;/b&gt;`,注意该标签不建议使用,因为其语义不明确,推荐使用`&lt;strong&gt;...&lt;/strong&gt;`或`&lt;mark&gt;...&lt;/mark&gt;`。 - **斜体显示**:`&lt;i&gt;...&lt;/i&gt;`,同样建议使用更具语义的`&lt;em&gt;...&lt;/em&gt;`。 - **...

    html总结,比较全面的

    - 示例:`&lt;table border="1"&gt;&lt;tr&gt;&lt;th&gt;表头&lt;/th&gt;&lt;td&gt;单元格&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;单元格&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;` - 表格的其他属性如`align`、`cellspacing`等可用于进一步定制表格样式。 ### 链接与导航 12. **超链接**...

    使用HTML开发基础知识

    - **换行标签**:`&lt;br/&gt;`,用于强制换行。 #### 七、常见的图片格式及其特点 - **JPEG**:适合照片或具有大量颜色渐变的图像。 - **GIF**:支持透明度和动画效果,但色彩数量受限。 - **PNG**:支持高色彩图像和...

    HTML基础属性解释

    - `&lt;br/&gt;` 是一个换行标签,用于在文本中强制换行。 3. **标题**: - `&lt;h1&gt; &lt;/h1&gt;` 到 `&lt;h6&gt; &lt;/h6&gt;` 用于设定不同级别的标题,数字越大,标题越小。 4. **粗体文本**: - `&lt;b&gt; &lt;/b&gt;` 用于将文本设置为粗体。 5...

    php基础整理笔记

    - 列表项 `&lt;li&gt;列表项&lt;/li&gt;` - 定义列表项 `&lt;dt&gt;定义列表项&lt;/dt&gt;` - 列表项描述 `&lt;dd&gt;列表项描述&lt;/dd&gt;` #### 八、图像标记 - **图像**: `&lt;img src="图像URL" alt="描述" width="宽度" height="高度" border=...

    网页HTML中各个代码意思大全.pdf

    6. `&lt;li&gt;`:列表项标签,用于定义无序列表`&lt;ul&gt;`或有序列表`&lt;ol&gt;`中的每个条目。 7. `&lt;ul&gt;`:无序列表标签,用于创建一个不按顺序排列的项目列表,列表项使用`&lt;li&gt;`标签。 8. `&lt;meta&gt;`:元数据标签,提供关于HTML...

    html笔记诠释

    7. **换行标签&lt;br&gt;**:`&lt;br&gt;`用于强制换行,但不创建新段落。 8. **缩进标签&lt;blockquote&gt;**:`&lt;blockquote&gt;`用于创建块引用,可以嵌套以增加缩进效果。 9. **预格式化标签&lt;pre&gt;**:`&lt;pre&gt;`保持文本的原始格式,常...

    HTML基础知识点总结.doc

    `&lt;br&gt;`标签用于强制换行。行的控制还可以通过CSS的`display`属性来实现。 6. **图片标签** `&lt;img&gt;`标签插入图像,`src`属性指定图像的URL,`width`和`height`设定尺寸,`alt`提供替代文本,`align`控制对齐方式,`...

    HTML5-标签集合.pdf

    3. **换行标签**:`&lt;br/&gt;`是一个单标签,用于在文本中强制换行,不产生新的段落。 4. **水平线标签**:`&lt;hr/&gt;`也是一个单标签,用于在页面中插入一条水平线,常用于分隔内容。 5. **字体样式标签**:`&lt;strong&gt;`使...

    网页开发复习资料

    - **换行标签`&lt;br&gt;`**:强制文本在当前位置换行。 - **标题标签`&lt;h1&gt;`至`&lt;h6&gt;`**:定义不同级别的标题。 - **水平分隔线`&lt;hr&gt;`**:在文档中创建一条水平线。 - **链接标签`&lt;a&gt;`**:创建超链接,属性`href`用于...

    HTML面经(适用于实习 秋招 春招)

    - **段落和换行标签**:`&lt;p&gt;`表示段落,`&lt;br/&gt;`用于强制文本换行显示。 - **文本格式化标签**:例如`&lt;strong&gt;`(粗体)、`&lt;em&gt;`(斜体)等。 - **&lt;div&gt;和&lt;span&gt;标签**:`&lt;div&gt;`常用于布局,`&lt;span&gt;`用于对文本进行...

    HTML相应知识点.docx

    1. 无序列表(ul):使用&lt;ul&gt;和&lt;li&gt;标签创建无序列表,列表项前默认带有小黑点,可以通过list-style-type属性改变样式。 2. 有序列表(ol):使用&lt;ol&gt;和&lt;li&gt;标签创建有序列表,列表项前有顺序标记,可通过type属性...

    整理后java开发全套达内学习笔记(含练习)

    byte &gt; short &gt; int &gt; long &gt; float &gt; double char 」 注意:默认类型转换(自动类型提升)会丢失精度,但只有三种情况: int&gt;float; long&gt;float; long&gt;double. 看一下他们的有效位就明白。 二进制是无法精确的...

Global site tag (gtag.js) - Google Analytics