带有省略号的段落就是你只能在一行显示一段文字,文字过长是肯定不能完全显示的,如果默认的话,超出的文字会自动换行,撑大盒子。

   1.这时需要设置white-space: nowrap,禁止换行。这样的话,文字就会在一行显示

   2.在一行显示就会有超出的部分,使用overflow: hidden将超出的部分隐藏。

   3.虽然隐藏了,但是有可能最后一个字被挡住一部分,而且我们需要的是省略号,这时再加上text-overflow: ellipsis;就可以将最后改成省略号。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

利用css实现带有省略号的段落的更多相关文章

  1. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  2. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  3. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  4. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  5. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  6. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  8. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  9. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

随机推荐

  1. 接口测试 - ti

    脚本 主程序 #!/bin/bash . /etc/ti/ti.conf . /etc/ti/ti.fun #-basic.json | curl -H "Content-Type:appl ...

  2. 图像处理、显示中的行宽(linesize)、步长(stride)、间距(pitch)

    在图像数据传输和显示的过程中有一个不常用的参数:间距. 间距的名称:它有很多的别名,在使用d3d显示的时候,它叫pitch:在用ffmpeg解码的时候,它叫linesize: 在用ffmpeg转换格式 ...

  3. 稀疏矩阵 part 2

    ▶ 各种稀疏矩阵数据结构之间的转化 ● MAT ←→ CSR CSR * MATToCSR(const MAT *in) // MAT 转 CSR { checkNULL(in); CSR * out ...

  4. js生成uuid

    前端不能像java一样有内置的uuid生成包,所以需要自己写一个function,每次调用这个函数都会生成一个不同的字符串,代码如下: getuuid() { var uid = []; var he ...

  5. pyqt5 -——菜单和工具栏

    一. 状态栏 # -*- coding: utf-8 -*-# @Time : 2018/12/22 12:37# @Author : Bo# @Email : mat_wu@163.com# @Fi ...

  6. take it easy

    昨天魏辉在群里说,觉得自己以前很多事情做的不对,以前是个傻瓜,我说我也是这么觉得的.为什么这么说呢?因为我真的觉得以前的自己就是个SB.人的成长可能就是这样的吧,小时候的一些事情,或者是原生家庭的环境 ...

  7. LR常用函数

    web_set_max_html_param_len()--常用函数 设置可检索并保存为参数的任何HTML字符串的最大长度. intweb_set_max_html_param_len(const c ...

  8. 网页html格式导出Excel.xls

    1.创建excel方法 /// <summary> /// 创建Excel表格 /// </summary> /// <param name="dt" ...

  9. (项目六)Mha-Atlas-MySQL高可用方案实践

    mha-mysql环境准备: 三台虚拟机,都安装了mysql,都关闭防火墙和selinux,同时在每台虚拟机上都做映射 软件包 1) mha管理节点安装包: mha4mysql-manager-0.5 ...

  10. Java框架spring 学习笔记(十八):事务管理(xml配置文件管理)

    在Java框架spring 学习笔记(十八):事务操作中,有一个问题: package cn.service; import cn.dao.OrderDao; public class OrderSe ...