设置文字不换行,超过的部分用“...”代替

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 210px;
除width属性外,顺序不要颠倒哦!
 
 
1.white-space

① normal 默认,空白会被浏览器忽略

② pre 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签

③ nowrap 文本不会换行,文本会在同一行上继续,直到遇到<br>标签(开始换行)为止

④ pre-wrap 保留空白符序列,但是正常地进行换行

⑤ pre-line 合并空白符序列,但是保留换行符

⑥ inherit 规定应该从父元素继承white-space 属性的值

2 word-break

① normal 使用浏览器默认的换行规则

② break-all 允许在单词内换行

③ keep-all 只能在半角空格或连字符处换行

3 text-overflow

① clip : 修剪文本

② ellipsis : 显示省略符号来代表被修剪的文本

③ string : 使用给定的字符串来代表被修剪的文本

【10】css设置文字不换行,超过的部分用“...”代替的更多相关文章

  1. css设置文字不换行,超过的部分用“...”代替

    设置文字不换行,超过的部分用“...”代替 overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: /*so ...

  2. 【css】CSS设置文字不能被选中

    CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...

  3. CSS设置文字不能被选中

    /*设置文字不能被选中     以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; us ...

  4. css处理文字不换行、换行截断、溢出省略号

    1.使文字不换行 white-space: nowrap; 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签 ...

  5. 怎样使用CSS设置文字与文字间距距离?

    [文字与文字间距距离,字与字距离间距CSS如何设置?]如果你也遇到W3Cschool用户唐婷大小姐类似的问题不妨也到W3Cschool编程问答进行提问. 对于使用CSS解决字间距的方法W3Cschoo ...

  6. css设置文字上下居中,一行文字居中,两行或多行文字同样居中。

    转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...

  7. css设置文字中间的小竖线

    主要css属性是border-right border-right:1px solid gray; padding-right:10px; padding-left:10px; <div dat ...

  8. css设置文字多余部分显示省略号

    如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素s ...

  9. [原创]css设置禁止中文换行

    white-space: nowrap;   如有需要还可以设置word-break,word-wrap配合.

随机推荐

  1. 如何避免学习linux必然会遇到的几个问题

    相信在看这篇文章的都是对linux系统所迷的志同道合的人,不管你是刚开始学,还是已经接触过一些linux的知识,下面的问题是你在学习linux所必须遇到的,若是没有的话那我只能说大神我服你了.下面我就 ...

  2. 自学Python5.7-面向对象三大基本特征_封装

    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...

  3. uestc summer training #3 线段树优化建边

    线段树建边 struct E { int value, modvalue; } a[MAXN << ]; pair<int, int> b[MAXN]; ], r[MAXN & ...

  4. STL源码阅读-functor与adapter

    为什么要用仿函数 函数指针不灵活,难以与STL其他组件配合使用 Adapter 将一个class的接口转换为另一个class的接口,使原本因接口不兼容而不能合作的classes,可以一起运作 STL中 ...

  5. dpkg -i libequinox-osgi-java_3.8.1-8_all.deb

    dpkg -i libequinox-osgi-java_3.8.1-8_all.deb dpkg -i libequinox-osgi-java_3.8.1-8_all.deb https://ww ...

  6. Acwing-282-石子合并(区间DP)

    链接: https://www.acwing.com/problem/content/284/ 题意: 设有N堆石子排成一排,其编号为1,2,3,-,N. 每堆石子有一定的质量,可以用一个整数来描述, ...

  7. 19.tcp_upd

    # socket编程 # 01010 ethernet(你在教室的那个位置)mark ip(教室在哪,主机)子网 tcp,udp(端口)应用程序在哪 # 物理层---->数据链路层------- ...

  8. (Java多线程系列四)停止线程

    停止线程 停止线程的思路 ①使用退出标志,使线程正常退出,也就是当run()方法结束后线程终止. class Thread01 extends Thread { // volatile关键字解决线程的 ...

  9. python实现的一个中文文本摘要程序

    文本摘要方法有很多,主要分为抽取式和生成式,应用比较多的是抽取式,也比较简单,就是从文本中抽取重要的句子或段落.本方法主要是利用句子中的关键词的距离,主要思想和参考来自阮一峰的网络日志http://w ...

  10. Jmeter(五)关联之正则表达式提取器

    我们在用Jmeter做接口或者性能测试时,经常会碰到第二个请求提交的的参数要从第一个请求返回的参数中获取,而这些参数值并不是固定的,是动态变化的,这种场景就要用到关联 Jmeter提供了一种叫做正则提 ...