word-wrap、white-space和word break的区别

最新推荐文章于 2024-03-12 13:07:22 发布
最新推荐文章于 2024-03-12 13:07:22 发布
阅读量53 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/877170/blog/297753
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1、word-wrap:break-word，内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。
2、word-break:break-all,用于处理单词折断。
3、white-space:no-wrap用于处理元素内的空白，只在一行内显示。
4、overflow:hidden,超出边界的部分隐藏。
5、text-overflow:elipsis,超出部分显示省略号。

转载于:https://my.oschina.net/u/877170/blog/297753

weixin_34293059
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 实现div内显示一行或两行，超出部分用省略号显示
荆轲刺秦王
12-27 1853
div内显示一行，超出部分用省略号显示  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;...
文本超出部分显示省略号
JJ_Smilewang的博客
04-06 3万+
我们经常在网站上可以看到以下样式，标题太长，一行显示不下，则会使用省略号来代替。但是事实上，这个省略号并不是打字打上去的，而是使用代码表示出来的。 今天则主要介绍如何让文本超出部分显示省略号。 1.单行文本超出部分显示省略号 1.1 语法 <style> .box { width: 400px; height: 30px; border: 1px solid red; /*第一步： 溢出隐藏 */ o
超出部分显示省略号
hqianq1106的博客
08-20 318
1.不换行，超出部分显示省略号 .box{ width:260px; /*超出部分就隐藏*/ overflow:hidden; /*不换行设定*/ white-space:nowrap; /*超出部分的文字显示省略号*/ text-overflow:ellipsis; } 2.可以换行，多行，超出部分显示省略号 .box{ width:260px; di...
CSS超出部分省略号
weixin_42340514的博客
10-19 402
1，单行文本实现超出部分省略号 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 2，多行文本实现超出部分省略号 overflow:hidden; text-overflow:ellipsis; display:-webkit-box;//将对象作为...
css中强制换行word-break、word-wrap、white-space区别实例说明
09-25
CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似，但它们在处理文本换行的细节上有所不同，下面将详细...
css文本换行属性word-wrap和white-space使用总结
01-19
word-break:break-all和word-wrap:break-word表示强制换行，前者若英文字符过长自动截断，后者整个英文单词会换行！ 而而我常会这样用： 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有...
word-break:break-all和word-wrap:break-word区别总结
12-08
`word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性，它们都有各自的特点和适用场景。 首先，`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...
文字超出部分用省略号表示
monkey的博客
12-23 1545
固定长度text-overflow:ellipsis;white-space:nowrap；overflow:hidden;"多行控制行数，多出部分省略号display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 4;overflow: hidden;
文本超出部分用省略号表示
Daisukes的博客
09-29 433
文本超出省略号 display:block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行文本超出省略号 display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; -web
文本超出显示省略号
weixin_48046344的博客
09-18 1139
line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。二、div内显示两行或三行，超出部分用省略号显示。一、div内显示一行，超出部分用省略号显示。
css控制文本超出部分用省略号表示
一灯笔记
02-26 783
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
css实现超出部分用省略号显示
huakaiwuxing的博客
07-24 121
white-space:nowrap; /*文本不换行*/ text-overflow:ellipsis;/*设置超出部分显示...*/ -o-text-overflow:ellipsis; overflow: hidden;
如何实现文本超出部分使用省略号
amn9450的博客
11-01 212
今天在做项目的过程中遇到一个问题，在这里贴出来让大神们想想更好的方法。 在显示数据时，字符串过长将截取一定长度的字符串然后加个省略号显示，可字母和汉字，大小写字母在显示时虽然length一样可显示的长度却不一样，有什么办法可以解决截取的字符串在实际显示时都是一样的呢？先说一下文本超出部分使用省略号的方法吧。 情况一：文本超出尾部使用省略号 css实现（此方法只能在单行文本超出部...
文字超出显示省略号的多种方法
Z_Gleng的博客
01-23 4178
不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）2.word-wrap:break-word;只对英文起作用，以单词作为换行依据。只对英文起作用，以字母作为换行依据。只对中文起作用，强制换行。注意：以上换行只对中文生效，如果是英文字母就不会换行需要以下属性。强制不换行，都起作用。
CSS实现单行、多行文本溢出显示省略号（…）
06-16 4万+
CSS实现单行、多行文本溢出显示省略号（...）
文字超出部分变成省略号的三种方式
热门推荐
weixin_51081257的博客
11-13 4万+
了解如何使超出盒子的文字变为省略号的三种方式，附上代码，直接复制就可以用，简单易懂，欢迎学习
CSS如果实现文本超出一行或多行时显示省略号...
最新发布
qq_21280835的博客
03-12 1061
如果使用css样式实现文本超出单行或多行显示省略号，具体方法如下↓。
CSS中 设置( 单行、多行 )超出显示省略号
一片天空
04-24 2215
CSS中 设置( 单行、多行 )超出显示省略号
white-space: pre-wrap;word-break: break-all;
03-29
The CSS property "white-space: pre-wrap;" preserves all white spaces and line breaks. The property "word-break: break-all;" breaks words when they exceed the container width. Together, these ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值