white-space

text-overflow ellipsis 自动截断超出范围的文本

由 怎甘沉沦 提交于 2020-10-28 13:09:36
今天前端同事问了一个小技巧的问题，怎么控制超出范围的文本自动截断，给她写完后来普渡下众生`(*∩_∩*)′ 1、普通的文本段 对于普通的文本段的话只需要定义下面三个属性 p { white-space: nowrap; /* 使内容不自动换行 对应的还有 normal 自动换行 */ overflow: hidden; /* 超出容器范围的内容隐藏 */ text-overflow: ellipsis; /* 文本超出容器范围以 ... 做截断 */ } <p>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </p> 2、表格的文本段 当在表格中想要实现此效果时需要将此表格的 table-layout 设为 fixed table { width: 100%; table-layout: fixed; /* 一定要有此属性 */ } td { white-space: normal; overflow: hidden; text-overflow: ellipsis; } 其他与普通文本段的定义没区别 来源： oschina 链接： https://my.oschina.net/u

让pre自动换行

由 被刻印的时光 ゝ 提交于 2020-04-06 07:13:03
让 <pre /> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持） 作者：龙震 　 默认情况下，<pre /> 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。 下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码： pre{ white-space:pre-wrap; /* css-3 */ white-space:-moz-pre-wrap; /* Mozilla, since 1999 */ white-space:-pre-wrap; /* Opera 4-6 */ white-space:-o-pre-wrap; /* Opera 7 */ word-wrap:break-word; /* Internet Explorer 5.5+ */ } 更多内容请参见：http://www.w3.org/TR/css3-text/#white-space。 pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙： Wrapping the pre tag Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting,

让pre自动换行

由 一笑奈何 提交于 2020-04-06 06:44:46
让pre自动换行 让 <pre /> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持） 默认情况下，<pre /> 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。 下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码： pre{ white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; } 更多内容请参见：http://www.w3.org/TR/css3-text/#white-space。 pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙： Wrapping the pre tag Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap: pre { white

单行省略 / 多行省略

由 守給你的承諾、 提交于 2020-02-28 05:26:03
多行省略 { display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal;} 2.单行省略 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 来源： CSDN 作者： Sword_meaning 链接： https://blog.csdn.net/Sword_meaning/article/details/104542657

文字超出容器长度自动隐藏并且显示省略号

由 久未见 提交于 2020-02-26 02:52:29
在做网站的过程中我们会遇到这样一种情况，在新闻列表中一行只显示一条新闻，但是新闻标题的长短是不一样的，如果新闻标题过长会自动换行，当然可以使用溢出隐藏属性，但是使用溢出隐藏又会显得比较突兀，现在给大家提供以下解决方法 <style> p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} </style> 只需要在原先写好的样式中加入上述代码即可 来源： 51CTO 作者： 日晚间粉 链接： https://blog.51cto.com/12765394/2161404

white-space和word-wrap和word-break所表示的换行和不换行的区别

由 懵懂的女人 提交于 2020-02-08 09:29:16
white-space和word-wrap和word-break所表示的换行和不换行的区别 一、前言 　　使得文本换行有很多方式， <br/>标签元素，能够强制使得所在位置文本换行 <p>元素，<div>设定宽度，都可以对文本内容实现自适应换行 对于长单词或者链接，默认不会断开换行，方式2就不能够在其这些文本内部进行换行了， 这时就需要word-wrap : break-word ;或者 word-break :break-all;实现强制断行 二、正文 1. 强制不换行 div{ white-space:nowrap; } /* white-space：normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 */ 2. 控制文本换行 div{ word-break: normal; 　　word-break: break-all; 　　word-break: keep-all; } /* word-break: normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行 break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文

white-space属性

由 妖精的绣舞 提交于 2020-02-05 12:27:57
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>white-space</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .nomal{ 12 margin: 20px; 13 height: 200px; 14 width: 200px; 15 border: 1px solid red; 16 background-color:#3a9; 17 } 18 .nowrap{ 19 margin: 20px; 20 white-space: nowrap; 21 height: 200px; 22 width: 200px; 23 border: 1px solid red; 24 background-color:#3a9; 25 } 26 .nowrap-overflow-text-overflow{ 27 margin: 20px; 28 white-space: nowrap; 29 overflow: hidden; 30 text-overflow: ellipsis; 31 width: 200px; 32 border: 1px solid red; 33 background-color:#3a9; 34

white-space: nowrap;

由 久未见 提交于 2020-02-05 12:27:35
定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。 默认值： normal 继承性： yes 版本： CSS1 JavaScript 语法： object.style.whiteSpace="pre" 实例 规定段落中的文本不进行换行： p { white-space: nowrap } TIY 浏览器支持 所有浏览器都支持 white-space 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 可能的值 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 来源： https://www.cnblogs.com/visi_zhangyang/archive/2011/03/01/1968169.html

PHP简单MVC架构

由 左心房为你撑大大i 提交于 2020-02-03 02:42:22
http://blog.csdn.net/haiqiao_2010/article/details/12166283 由于需要搭建一个简单的框架来进行API接口开发,所以简单的mvc框架当然是首选.最原始,最简洁的mvc框架.下面来介绍下. 一. 项目目录结构: app |-controller 存放控制器文件 |-model 存放模型文件 |-view 存放视图文件 core |-lib 存放自定义类库 |-config 存放配置文件 |--config.php 系统配置文件 |--conn.php 数据库连接文件 |--db_config.php 数据库配置文件 |-mysql_db.php 数据库类文件 |-runtime 缓存文件 db_caches 数据库缓存文件 logs日志文件 |-index.php 入口文件 | -dispatcher.php | -loader.php | -router.php 二.项目架构 1.先介绍index.php,附源码: [php] view plain copy <?php include( "./core/ini.php"); include( "./core/config/config.php"); include( "./core/global.fun.php"); include( "./core/common.php");

XPath函数——字符串函数

由 时光怂恿深爱的人放手 提交于 2020-02-02 03:49:53
字符串函数主要用来处理字符串。字符串函数主要包括以下：concat(),contains(),normalize-space(),substing(),substring-before(),subsring-after(),translate(). 1、concat() concat()函数用于串连多个字符串。 简单示例： xml： <?xml version="1.0" encoding="UTF-8"?> <root> <e id="1">st</e> <e id="2">nd</e> <e id="3">rd</e> </root> */ /*--> */ xslt： <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="text" version="1.0" encoding="gb2312" indent="yes"/> <xsl:template match="/root"> <xsl:for-each select="e"> <xsl:value-of select="concat(@id,.,' ')"/> </xsl:for-each> <
订阅 white-space