css3--断行问题+多余的字用省略号代替

最新推荐文章于 2023-12-18 09:10:12 发布
最新推荐文章于 2023-12-18 09:10:12 发布
阅读量752 收藏
点赞数
分类专栏： little knowledge
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sevenbblythelulu/article/details/47728471
版权

1、经过多种尝试，觉得这个搭配比较好，控制换行

   word-wrap:break-word;overflow:hidden/auto;

  word-wrap:break-word(整个单词移到下一行)

2、文本不会换行，省略号

     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(溢出，就用“...”代替)

    text-overflow:clip(不显示省略号)

sevenbblythelulu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS不用程序实现文字自动截断 用省略号代替
10-30
使用CSS实现文字自动截断用省略号代替 在Web开发中，经常需要对文字进行截断，以便适应不同的屏幕尺寸和布局。传统的方法是使用JavaScript来实现文字截断，但这需要编写复杂的代码并且需要考虑浏览器的兼容性问题。...
css把超出的部分显示为省略号的方法兼容火狐
09-06
兼容火狐css控制超出部分用省略号代替
将多余的字用省略号表示，只显示一行（n行）
furfur-jiang的博客
04-15 352
只显示一行（n行） .hideWord{ display: -webkit-box; -webkit-box-orient:vertical; overflow: hidden; -webkit-line-clamp: 1; /*n行*/ }
HTML5 css 一行、两行多余省略号
fang5211的博客
10-25 157
单行多余省略号 overflow:hidden; white-space: nowrap; text-overflow: ellipsis; 两行多余省略号 text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
CSS文本换行加省略号
asing1elife's blog
10-17 302
文本换行的后需要对超出的内容加省略号，text-overflow: ellipsis 无法实现此需求 更多精彩 更多技术博客，请移步 asing1elife’s blog 解决 overflow: hidden; // 只有webkit内核浏览器支持 display: -webkit-box; // 需要指定换行数 -webkit-line-clamp: 5; -webkit-box-or...
css，文本一行显示或多行显示，多余的显示省略号
最新发布
motoudi的博客
12-18 317
【代码】css，文本一行显示或多行显示，多余的显示省略号。
css将多余文本以省略号显示
joe_dev的博客
12-15 574
.mycss{          width: 50px;          height: 20px;          overflow: hidden;          display: block;          text-overflow: ellipsis;          white-space: nowrap;          cursor:
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
10-20
本篇文章主要介绍了js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示，具有一定的参考价值，有兴趣的同学可以了解一下。
CSS文本超出div或者span时用省略号代替
12-13
在项目中我们经常需要在文本过长时显示，将文本超出的部分内容用省略号代替： 思想为： 首先设置宽度，然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为： 复制代码代码如下:.title{...
js实现文字超出部分用省略号代替实例代码
10-21
关于超出一定字数用省略号显示的问题，这种要求在我们日常开发的时候经常见到，我们之前基本都是用CSS来完成的，今天给大家分享个Javascript实现这个功能的示例代码，有需要的可以参考借鉴。
截断大文本并以省略号替代的样式
bolan392的博客
07-29 163
  在HTML页面的表格中显示长时，表格总是会因为文字过多而拉伸变形，所以通常需要截断文本，并在后面添加省略号，当鼠标移动上来时再弹出全部内容的提示，要做到这种效果，则需要经过以下几步：   首先，定义以下CSS样式表： .title { width:150px; white-space:nowrap; word-break:...
利用css实现文本超出N行之后显示省略号等css常用小知识点
小白变怪兽
03-01 4506
css代码如下： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 -webkit-box-orient: vertical; 效果如下图所示...
H5视频video标签宽高自适应代码（设置视频的宽高）
阿酷tony
03-23 1万+
H5视频video标签宽高自适应代码（设置视频的宽高） 一般情况下： <video width="320" height="240" controls="controls"> 但是有的时候发现设置了视频的高度却并没有发生变化，我们可以设置其父元素的宽高，让video填充满父元素。只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。 object-fit语法 object-fit:fill | contain |
css 常见样式
LiBo
08-25 376
/* 1、得是以配置为inline-block的元素，或默认以block呈现的div、p元素 2、强制不换行 3、固定宽度 4、超出部分隐藏 5、超出部分以'...'结尾 */ .test { border:1px solid #000000; display: inline-block; white-space: nowrap; width: 140px; overf...
css div多余文字用省略号代替
xyr05288的专栏
01-13 1万+
一. 相关知识(1)规定段落中的文本不进行换行p { white-space: nowrap }可能的取值以及描述normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符
CSS中字体响应式的设置 & rem与px的转换
吴冬雪的博客
05-27 2721
在进行页面响应式设计中，往往需要根据屏幕分辨率来显示不同大小的字体。通常的做法是通过media queries给不同的分辨率指定不同的字体样式，例如： CSS中几种不同单位之间的比较 px：像素（Pixel）。相对长度单位，所占大小由屏幕分辨率决定。em：相对长度单位。相当于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，它会继承父级元素的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10p
css文本换行加省略号
清音的博客
07-06 2326
display: -webkit-box; /*控制显示行数*/ -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/ -webkit-box-orient: vertical; overflow: hidden;
多余字符用省略号...显示
queen_css的博客
10-20 277
多余字符用省略号...显示
CSS超过一行自动显示省略号
热门推荐
魏思黔的博客
08-07 4万+
今天在写图中这个显示帖子的标题时出现了一个问题！我希望的是当标题的长度超过标签的宽度的时候自动显示省略号！这是CSS已经支持了的，而且以前也写过！可是现在重新写这个功能的时候不记得怎么写了！在经过一段时间的百度以后知道了怎么写！现在记录一下 代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
css保留两行文字，多余用省略号，第一行充满
03-21
可以使用CSS的text-overflow属性来实现这个效果。具体的代码如下： ... 这是需要截取的文本，如果超过两行就用省略号代替。 ``` 注意，这种方法只适用于单行或多行文本截取，不适用于截取图片等其他元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值