text-overflow

在web开发过程中，常常会遇到要让布局中的某些文本根据宽度来显示，如果超过最大宽度仍然显示不完的，就显示为省略号的情况。可以通过程序截取，JS字符串截取。在css中可以通过text-overflow进行设置，但是这种效果只适用于单行显示的文本。

text-overflow语法
text-overflow: clip|ellipsis|string;

text-overflow取值
clip ：不显示省略标记（...），而是简单的裁切。
ellipsis：当对象内文本溢出时显示省略标记（...），来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

text-overflow说明
1、text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），也就是说 overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用，只有这样才能实现溢出文本显示省略号的效果。
2、一定要给容器定义宽度.
3、如果少了overflow: hidden;文字会横向撑到容器的外面
4、如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉
5、如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.
6、如果容器是table，当文字内容过多时，不换行，而是出现...
7、对应的脚本特性为 textOverflow 。 object.style.textOverflow="ellipsis"　

时间： 2024-10-13 18:16:50

text-overflow的相关文章

[学习笔记]day02&CSS

一,什么是CSS? Cascading Style Sheets层叠样式表 层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用 样式表:就是css属性样式的集合 CSS的作用 1. 对html页面进行美化和修饰 2. 将html的内容和样式进行了分离,让文档看起来更清晰 3. 提高代码复用性 ? 1. CSS的选择器(三种) 一,基本选择器(三种) 1.ID选择器 ? (1)id选择器 id唯一性 语法:#id的值{css属性}

关于STM8空间不足的解决方法

STM8虽然功能齐全,但是空间不足也是经常出来的情况.要么.text overflow,要么.bss overflow,让人头疼.这里把一些优化方案列出来,让空间得到充分利用: 1.在Project settings下,C Compiler,Optimizations选择Customize 重点是把Split Functions选上. 意思就是只编译用到的函数,不然编译器会很傻地把你用到的C文件里所有函数都编译进去,空间当然不够啦! 2.再到Linker下,Category选择Input 然后看

浮点数转换成字符串函数

sprintf函数太大,在STM8上面根本不敢用,动不动就.text overflow.为了将采集的数值通过串口上传到计算机,只能自己写了一个浮点数转换成字符串的函数: #include <stdio.h> #include <stdint.h> static char table[]={'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'}; void num2char(char *str, double number, uint8_t

微信开发的一些问题

页面禁止缩放: <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1"> 关于禁止横屏: 关于在移动端使用普通的click事件延迟300ms的问题: 1. 将click事件转变成touchstart/touchend事件(手指按下即会触发) ;(function(){ va

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> 1. CSS3 box-shadow属性 CSS3

css3之文本text-overflow 与 word-wrap, word-break

CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis; overflow:h

CSS设置表格TD宽度布局

使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数浏览器采用自动表格布局算法对表格布局:表格及单元格的宽度取决于其包含的内容. fixed :表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定:在当前列中,该单元格所在行之后的行并不会影响整个列宽. **注意** 使用 "fixed" 布局方式时,整个表格可以在其首行

pure.css

注释中address是纠正的意思  等价于correct/*! Pure v0.5.0 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yui/pure/blob/master/LICENSE.md */ /*! normalize.css v1.1.3 | MIT License | git.io/normalize Copyright (c)

理解 CSS 布局和块级格式上下文

前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context,内容足够简洁明了. 本文的目的是介绍一些概念,来帮你增强 CSS 码力.如标题所示,这篇文章主要是讲块级格式上下文(BFC,Block Formatting Context).你可能没听过这个术语,但只要你曾经使用

CSS兼容处理（二）

在IE6及以下版本的浏览器中定义小高度: 解决方法:#text { overflow:hidden; height:1px; font-size:0; line-height:0;} 具体详解:IE6及以下浏览器无法定义小高度的原因是,默认有行高. 在IE6及以下版本浏览器中定义最小高度: 解决方法:#text { min-height:100px; _height:100px;} 注意:此时#text不能设置overflow为hidden,否则模拟min-height失效. 解决按钮两边增白: