`
axl234
  • 浏览: 263464 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css文字超过宽度出现省列号

    博客分类:
  • css
 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p:first-letter{ font-size:28px}  <!--ie6不支持伪类-->
</style>
</head>
<body>
<p style="width:100px; height:25px; line-height:25px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;">即可到圣诞节啥考试死定了</p>
<a style="display:inline-block;width:100px; height:25px; line-height:25px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;" href="#" title="即可到圣诞节啥考试死定了">即可到圣诞节啥考试死定了</a>
<!--要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。 -->
支持所有的浏览器
</body>
</html>

分享到:
评论

相关推荐

    自适应各种终端各分辨率的CSS+XHTML

    图像可以通过设置`max-width: 100%`来确保其不会超过容器宽度,保持比例缩放。 在实现响应式设计时,通常会使用Flexbox或Grid布局。Flexbox允许灵活地对齐和排列项目,无论它们的尺寸如何变化,而Grid则提供了一个...

    html+css考试题.doc

    7. 表格单元格宽度计算:表格的总宽度减去边框宽度和间距后,再除以列数,得到每列的宽度。若总宽度为699,间距5,边框3,且等宽4列,则每个单元格宽度为(699-(2*3)-(3*5))/4=167。 8. 文本对齐:`&lt;div&gt;`标签的`...

    css-adv:htmlcss 布局实现技巧练习

    )简单的tab切换,要压住下边线哦左小图,右自适应宽度的布局,小三角箭头的应用箭头以及垂直排列tag标签,注意文字垂直居中,标签要水平对齐表格布局小应用,如何变得更精美复杂的下单列表筛选排序功能筛选价格功能...

    CSS 参考手册

    CSS参考手册还包含了更多属性,如文字样式、布局、选择器等,它们共同构成了丰富的CSS功能,帮助开发者创建美观、响应式和功能完善的网页。理解和熟练掌握这些属性是成为专业前端开发者的必备技能。通过W3School的...

    Web前端开发与应用教程 (HTML5+CSS3+JavaScript)第2版第16章 参考答案.pdf

    在16.3部分,可能讲解了如何在屏幕宽度小于1000px时,将页面布局为两列,而在宽度大于1000px时,改为三列的实现方式。 最后,创建一个响应式网页的实践项目,如例16-1所示,是一个很好的学习机会。这样的项目可以...

    优秀的CSS 框架整理

    2. **YUI Grids CSS**:由Yahoo开发的YUI Grids提供四种不同的页面宽度和六种边框模板,能轻松调整布局。4KB的文件大小却能实现超过1000种页面布局,非常适合响应式设计。 3. **YAML CSS Framework**:由Dirk Jesse...

    HTML和CSS面试题及答案.docx

    5. **嵌套列**: 在Bootstrap栅格系统中,列(col-)可以嵌套,但不应该在列内创建新的行(row)。选项B是错误的,因为它在.col-sm-1内部创建了.row。 6. **水平线**: `&lt;hr&gt;`标签用于创建一个水平线,选项A正确。` `...

    UI设计规范2[参考].pdf

    4 个字以上的文字与字段框分行排列,原则上文字行宽度不超过字段框宽度,并且统一以左(left) 对齐的方式排列。 文字与表格边框的边距 文字在页面中的 left 、right 方向对齐时,与边框或表格的距离最小为 10px ,...

    CSS表格样式:圆角,隔行,变色的具体实现

    /* 确保表格宽度不超过其容器 */ background-color: transparent; /* 表格背景颜色透明 */ border-collapse: collapse; /* 合并相邻边框 */ border-spacing: 0; /* 去除单元格之间的间距 */ } ``` 接着,我们...

    ResponsiveHorizontalLayout

    例如,我们可以定义一个针对小屏幕设备的样式,当屏幕宽度小于600px时生效,而当屏幕宽度超过这个阈值时,应用另外一套样式。这样,我们的布局就可以在手机、平板电脑和桌面显示器上呈现出良好的视觉效果。 在响应...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    为了确保列的总和不超过12,可以组合使用这些类。 在实际应用中,我们可以通过以下步骤实现Bootstrap栅格系统: 1. 引入Bootstrap资源:首先需要将Bootstrap的CSS、JavaScript文件及字体资源引入到HTML文件中。这...

    网页设计考试题借鉴.pdf

    7. 表格单元格宽度计算:若表格有1行4列,总宽度699,间距5,填充0,边框3,则每列宽度为(699 - (4-1)*5 - 4*3)/ 4 = 167。 8. 文本对齐源代码:HTML中,居中对齐是`&lt;div align="center"&gt;`,不是`middle`,所以A...

    Web前端开发中级实操考试评分细则_V1.01

    1. **device-width**:在响应式设计中,`device-width`是一个CSS媒体查询属性,用于获取设备的宽度,常用于定义不同屏幕尺寸下的样式。 2. **stylesheet**:CSS样式表,用于定义HTML或XML(包括如SVG、MathML等各种...

    通过js给网页加上水印背景实例

    如果水印的总宽度超过页面宽度,应重新计算列数和间隔,以保持水印在页面内。 5. **调整水印行数和间距**:同理,检查水印行数是否超过页面高度,并进行相应的调整,以确保水印不会超出页面的垂直范围。 6. **生成...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量...

    程序天下:JavaScript实例自学手册

    3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量...

    Highcharts选项配置详细说明文档

    6. `style`: 设置CSS样式,如字体大小、颜色等。 **XAxis和YAxis选项配置** `XAxis`和`YAxis`用于设置坐标轴属性,包括: 1. `categories`: X轴或Y轴的分类名称。 2. `title`: 包含`text`、`enabled`、`align`、`...

    2020学年第一学期网页设计与制作期末考试试卷(A卷) 19电商3.docx

    19. **替换文字**:在Flash的“鼠标经过图像”窗口中,替换文字不是必需选项,主要是设置鼠标悬停时显示的替代文本。 20. **:link选择器**:CSS的`:link`选择器用于设置未被访问过的链接的样式。 21. **表单对象**...

    dreamweaver试题及答案.docx

    10. 表格元素:表格由行(rows)、列(columns)和单元格(cells)组成,边框是表格的一部分,但不是最基本的元素。 11. 选中表格:单击表格的任意边框即可选中整个表格。 12. 单元格选择:在Dreamweaver中,可以...

    ExtAspNet_v2.3.2_dll

    -修正IE下有时会出现空白页面的情况(feedback:olivia919)。 +2009-12-06 v2.1.8 -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)...

Global site tag (gtag.js) - Google Analytics