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

css 超过宽度的文字显示点点

    博客分类:
  • html
 
阅读更多

要显示为点点,3个缺一不可,还有,除了firefox,opera其他浏览器都支持,包括可恶的ie6。

代码如下:

text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden; 

 解释一下:

text-overflow :ellipsis; //让截断的文字显示为点点。还有一个值是clip意思是截断不显示点点
white-space : nowrap; //让文字不换行
overflow : hidden; //超出要隐藏

要显示为点点,3个缺一不可,还有,除了firefox,opera其他浏览器都支持,包括可恶的ie6

分享到:
评论

相关推荐

    css控制文本实现越界省略号以及自动换行

    当文本长度超过容器宽度时,超出部分会被隐藏,并在结尾处显示省略号。 接下来是自动换行的设置。如果你希望文本在遇到边界时自动换行以适应容器,可以使用`word-break`和`white-space`属性。以下是一个例子: ```...

    移动端内容超出

    1. **媒体查询**:CSS3的媒体查询允许我们根据设备的特定特性(如视口宽度)应用不同的样式。例如,可以设置在小屏幕设备上隐藏某些元素或调整它们的布局。 ```css @media (max-width: 600px) { .content { ...

    css块状元素与内联元素以及inline-block

    * 宽度就是它的文字或图片的宽度,不可改变 * 内联元素只能容纳文本或者其他内联元素 常见的内联元素有: * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体...

    WEB进度条、滚动条、让你字体内容炫起来

    通过调整CSS样式,我们可以改变进度条的颜色、宽度和形状,使其与网站的总体设计风格保持一致。同时,使用JavaScript可以实时更新进度条的值,提供动态反馈。 接着,我们讨论滚动条。滚动条是网页内容超出可视区域...

    菜单滑块模式:DOM和CSS

    我们可以使用CSS选择器来定位特定的DOM元素,并应用样式规则,如颜色、字体、边框、背景、位置等。同时,CSS3引入了许多新的动画和过渡效果,如`transition`和`animation`,可以轻松地实现滑动效果。 创建一个菜单...

    zthqq1.github.io:点点滴滴

    【zthqq1.github.io:点点滴滴】这个项目是一个基于GitHub Pages的个人博客网站,主要涉及的技术是CSS。在CSS领域,这是一个很好的实例来学习和理解如何利用CSS创建一个美观且功能齐全的网页布局。以下是一些重要的...

    html-and-css-practice

    CSS则是用于控制网页样式的语言,它可以改变HTML元素的颜色、字体、大小、布局等视觉表现。在实践中,你可能会看到CSS代码被包含在HTML文件的`<style>`标签内,或者存在于单独的`.css`文件中。学习者需要理解选择器...

    MuYuXiao.github.io:博客

    - 行内布局(Inline Layout):行内元素在同一行显示,如文字。 - Flex布局:弹性盒模型,适应不同屏幕尺寸,便于创建响应式设计。 - Grid布局:二维网格系统,适用于复杂布局。 6. **CSS预处理器** 如Sass、...

    codetill5.textEditor.github.io:使用HTML,CSS和JavaScript构建的基本文本编辑器

    响应式设计的关键在于媒体查询(Media Queries),它允许CSS规则根据设备的特性(如屏幕宽度)来应用不同的样式,使得界面在不同设备上都能适应和显示正确。 **JavaScript** 是使网页具有动态交互性的语言。在这个...

    projectteam12

    CSS可以控制网页的布局,包括颜色、字体、布局以及不同设备上的响应式显示。 以下是一些关于CSS的重要知识点: 1. **选择器**:CSS的选择器用于定位HTML元素。常见的选择器有ID选择器(#id)、类选择器(.class)...

    fitness-club.github.io:我的网站

    1. **页面布局**:CSS通过盒模型(Box Model)控制元素的宽度、高度、内边距和外边距,实现响应式设计,使网站在不同设备上都能正常显示。 2. **颜色和背景**:CSS可以设置文本颜色、背景颜色、渐变效果,以及图片...

    html-:flag 每天进步一点点,天添 跟随大神补一下基础知识

    CSS允许我们定义颜色、字体、布局等样式,通过选择器(如ID、类或元素名)来指定特定HTML元素的样式。 JavaScript代码位于`js`文件夹中,它为网页添加了动态功能和交互性。通过事件监听器、函数调用和DOM操作,...

    现场响应

    其次,媒体查询是CSS3的一个功能,允许开发者根据设备特性(如视口宽度、分辨率等)应用不同的样式规则。最后,灵活的图片和媒体意味着图片和视频会按比例缩放,保持其与周围内容的比例,防止在小屏幕上出现横向滚动...

    atelieshop

    7. **字体和文本样式**:CSS允许自定义字体家族、大小、颜色、对齐方式等,以实现独特的文字表现。在电商网站中,清晰易读的字体和吸引人的文本样式至关重要。 8. **过渡和动画**:`transition`和`animation`属性...

    sujin.co

    2. **盒模型**:理解CSS盒模型(content, padding, border, margin)对于布局至关重要,这影响到元素的宽度和高度计算。 3. **布局技术**:包括流体布局、网格系统(CSS Grid)、Flexbox和最近的CSS Grid Layout,...

    akpneus:garagiste akpeneus Bulle Agim -AnneClaude

    CSS媒体查询(Media Queries)让我们可以根据设备特性(如宽度、高度、分辨率等)应用不同的样式。 7. **动画和过渡**:CSS3引入了动画和过渡效果,使得网页元素能够平滑地改变状态,提升用户体验。 8. **预处理器...

    lightning-navigation-bar:闪电组件样品包

    《深入理解Lightning Navigation Bar:基于CSS的组件实践》 在现代Web开发中,用户界面的设计与交互体验至关重要。Salesforce的Lightning Experience提供了一种强大的工具——Lightning Navigation Bar,它是一个...

    kaocoffee-20-03-2021

    CSS3引入了媒体查询(Media Queries),允许根据设备特性如视口宽度调整样式。kaocoffee项目很可能采用了这一技术,确保在不同屏幕尺寸的设备上都能呈现良好的用户体验,无论是手机、平板还是桌面电脑。 此外,...

Global site tag (gtag.js) - Google Analytics