div+css设置列表li超出部分显示省略号
在网页设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS 的代码控制来实现文本截取的方法。与程序员的直接字符截取的方式有点区别,其优势是可以自动控制文本显示的长度;缺点是不同浏览器的兼容性并不完美。使用到 overflow,text-overflow,white-space 这三个主要的属性,其他的代码属于修饰作用。
CSS代码:
<style> .texthidden{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #ddd;} </style>
HTML代码:
<div class="texthidden">
CSS让容器的溢出部分内容隐藏起来
</div>
代码分析:
1. width:200px; //指定宽度:
2. overflow:hidden; //将超出内容隐藏
3. text-overflow:ellipsis; //IE专用属性,文本溢出时显示省略标记();其他浏览器不支持。
4. white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素
目前使用这种方法比较成功的示例是Gmail的内容显示,在IE下达到最好的效果。如果是FF那就比较糟糕,总是会出现截取半个中文的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效,目前很多CSS属性也存在这个问题,特别重要的是Margin和Padding这两个属性,往往导致页面出现各种不同的效果;在页面设计的时候,需要注意这些属性在不同浏览器的显示效果。
相关推荐
要实现`li`元素内容超出后显示省略号,需要使用CSS(层叠样式表)的相关属性来控制。以下是实现该效果的关键知识点: 1. `width`属性:用于设置`li`元素的宽度。在本例中,将`li`的宽度设置为200像素。这个宽度值应...
- 使用位于相对路径`../images/menubg.jpg`的图片作为背景,并设置其重复模式为`no-repeat`,确保图片不重复显示。 5. **.logo2** - 宽度设为200像素,未指定高度则默认由内容决定高度。 6. **.menu_dh** - ...
本文将深入探讨如何使用纯CSS(Cascading Style Sheets)来实现一个功能完备、多级下拉的鼠标点击显示导航菜单。这样的菜单不仅提高了用户体验,还简化了HTML结构,减少了JavaScript的依赖。 首先,我们要理解CSS的...
- `hidden`:不显示超出对象尺寸的内容。 - `scroll`:始终显示滚动条。 3. `white-space` 属性: `white-space` 属性用于设置如何处理元素内的空白字符。在这个例子中,我们使用 `nowrap` 来强制文本不换行,...
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 <li class=cell>序号</li> <li class=cell>姓名</li> <li class=cell>年龄</li> <li class=cell>性别</li> <li ...
然而,仅仅使用rem可能不足以解决所有移动端内容超出的问题。以下是一些额外的解决策略: 1. **媒体查询**:CSS3的媒体查询允许我们根据设备的特定特性(如视口宽度)应用不同的样式。例如,可以设置在小屏幕设备上...
- 通过CSS设置元素的`height`和`overflow`属性,可以控制内容是否超出容器高度并隐藏超出部分。`height: auto;`让元素高度根据内容自适应,而`height: 40px; overflow: hidden;`则是设置元素高度固定,并隐藏溢出的...
2. CSS初始化:首先,我们需要对`<ul>`和`<li>`元素进行基本的样式设置,消除默认样式,如边距和填充。 ```css .menu, .menu li { margin: 0; padding: 0; list-style-type: none; } ``` 二、CSS级联菜单的显示...
- **作用**:当内容超出容器宽度时,自动隐藏超出部分并显示省略号。 - **应用场景**:适用于导航栏、列表项等需要限制文字长度的场景。 #### 总结 通过以上对CSS+DIV编写经验总结之CSS样式小模板的解析可以看出...
可以使用HTML的`<nav>`、`<ul>`、`<li>`等元素来结构化菜单,然后用CSS定义样式,如背景色、字体、边距、边框和悬停效果。浮动元素(`float: left;`)或使用Flexbox (`display: flex;`)和Grid (`display: grid;`)布局...
然后,隐藏二级菜单并定义其位置,使其在一级菜单下方,但超出视口范围,以便在鼠标悬停时显示: ```css .subnav { position: absolute; top: 100%; left: 0; display: none; /* 默认隐藏 */ background-color...
我们可以为`<ul>`添加背景色、边框和内边距,为`<li>`设置行高、字体样式等: ```css .list-panel { background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; } .list-panel li { line-height: 30...
- **字体 (`font-family`)**:设置字体类型。 - **颜色 (`color`)**:设置字体颜色。 这些属性用于调整文本外观,增强可读性。 #### 盒模型 - **标准盒模型**:实际宽度 = `width + left padding + right padding...
- **作用**:设置文档主体的文本颜色、背景色、字体家族、字体大小、文本对齐方式及宽度。 - **应用场景**:网页主体布局的基础样式设定。 ##### 2. 元素内边距与外边距统一化 ```css body,ul,ol,li,p,h1,h2,h3,h4,...
clip参数值表示溢出的内容将被简单地裁剪掉,不显示任何替代符号。而ellipsis参数值则用于当对象内文本溢出时,在内容末尾显示省略标记,如省略号(…),从而提示用户还有更多的内容未显示出来。 在实际应用中,...
### CSS文章列表滑动门混排、文字、滚动效果知识点解析 #### 一、滑动门技术概述 在网页设计中,“滑动门”技术是一种常见的布局技巧,主要用于创建复杂且具有动态效果的导航菜单或者按钮等元素。该技术的核心在于...
此设置可以在内容超出容器高度时自动显示滚动条,同时隐藏溢出的部分,保持页面整洁。 #### 四、小窗口弹出的问题 **问题描述**:实现一个弹出窗口的功能,该窗口出现时,背景变为灰色不可操作状态。 **解决方案*...
### CSS样式代码案例详解 ...通过这些示例,我们可以看到CSS的强大功能和灵活性,同时也了解到了一些常用的布局技巧和样式设置方法。对于前端开发者而言,熟练掌握这些基本概念和技术是非常重要的。
本压缩包“day03(CSS01-基础选择器+字体文本样式).rar”显然是一个关于CSS学习资源的集合,主要涵盖了基础选择器和字体文本样式的概念与应用。下面我们将深入探讨这两个关键知识点。 **一、基础选择器** 1. **...
兼容浏览器的CSS控制字符宽度省略号效果,是非常实用的,由于FF对溢出显示省略号的属性支持不好。因而在进行编码时,应用到了一个HACK和FF的私有属性,大家在学习时注意区别。 看下面的HTML代码: <ul> <li>使用CSS...