css文本换行以及出现省略号简单处理

1. 使用word-wrap:break-word 不生效的情况:

1. 对行元素不生效;2. 代码里有默认设置的不换行;3. 由于粘贴复制的英文段落,导致文字换行不生效,有时候是文字被切割,于是 删除掉被切割的那个单词,
然后手动输入一遍 就解决了.(这个是我自己遇到的,也许可能帮到你)

2. 下面是,平时用到的一些, 文字处理css:

文本多出隐藏（从第二行开始）

overflow: hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
# 不换行出现省略号
overflow:hidden;
white-space:no-wrap;
text-overflow: ellipsis;

出现滚动

# 出现滚动，要配合强制不换行，因为文本超出浏览器会自动换行
white-space: nowrap;
overflow: scroll;

word-break: break-all 和 word-wrap: break-word 的区别

# word-break:break-all 正如其名字，所有的都换行。毫不留情，一点空隙都不放过。
# word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格，
或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，
让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况.

word-spacing 和 white-space

# word-spacing 是单词之间间距的;
# white-space 是字符是否换行显示的:normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行);pre: 保持HTML源代码的空格与换行,等同与pre标签;nowrap: 强制文本在一行,除非遇到br换行标签;pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行;pre-line: 同pre属性,但是遇到连续空格会被看作一个空格;inherit: 继承;

文本两端对齐

box.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");
上面的方法适用于中文内容，如果段落含有英文片段，会干掉原来的空格，因为三个空格会被当做一个空格距离处理，
因此，我们还需要对连续3个空格左下特殊处理，因此代码进化成:
box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " &nbsp; ");

css文本换行以及出现省略号简单处理相关推荐

CSS文本超过两行用省略号代替(兼容所有浏览器)
CSS文本超过两行用省略号代替方法一:常规写法(只兼容Chrome内核浏览器) 方法二:可以兼容所有浏览器的方式( js + CSS实现 ) 方法三:可以兼容所有浏览器的方式( 纯CSS实现 ) 方 ...
css input 内容换行显示,CSS文本换行详解
还记不记得昨天发表的<table表格那点事儿>最后的一个问题不?先撇开问题,我们从头说起. 在网页排版中,有些时候是需要文本自动换行的,对于中文来讲,无需设置属性即可自动实现换行,但是对于 ...
css文本换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 <div style='text-indent:2em'& ...
深入研究 CSS 文本换行
欢迎和号主[前端点线面]进群盘算法,此外本号干货满满:14个门类(100+篇原创)内容(又干又硬).<前端百题斩>pdf(助力薪资double).20+篇思维导图(知识系统化.记忆简单化) ...
CSS 文本超出两行显示省略号
// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...
html多行文本折叠,html – CSS文本换行折叠容器
我正在寻找一个 HTML / CSS解决方案来解决我们在我们正在构建的网站上遇到的问题. 如果需要,我很乐意实现基于 JavaScript的解决方案,但我更喜欢它本地处理. 我们有内容管理文本,它需要 ...
css文本换行加省略号
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* 可以显示的行数,超出部分用...表示*/ -webkit-box-ori ...
CSS 文本超出溢出显示省略号...
源码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
css文本溢出隐藏显示省略号
一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...

css文本换行以及出现省略号简单处理

1. 使用word-wrap:break-word 不生效的情况:

2. 下面是,平时用到的一些, 文字处理css:

css文本换行以及出现省略号简单处理相关推荐

最新文章

热门文章