文档章节

css 智能省略(剪切)多余部分的字体

issac宝华
 issac宝华
发布于 2016/11/28 18:30
字数 162
阅读 13
收藏 0
点赞 0
评论 0

主要属性:

text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本。

white-space: nowrap;     // 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

overflow: hidden;        // 将超出部分隐藏

 

ps:模拟块级元素

  • 需要块级元素,或者 
  • 限制文字显示的宽度:width。

 

例子:

<style type="text/css">

    .ellipsis{ 

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

        display: inline-block;

        vertical-align: middle;

        width: inherit; 

    }

</style>

<div style="width: 150px;border: 1px solid red;margin-top: 100px;margin-bottom: 100px;">

    <span class="">生活就像海洋,只有意志坚强的人才能到达彼岸</span>

</div>

使用ellipsis类前:

使用ellipsis后:

© 著作权归作者所有

共有 人打赏支持
issac宝华
粉丝 9
博文 121
码字总数 34397
作品 0
珠海
【CSS实践】——div和table中容纳长文本设置省略值...

前言 积累一下css代码,关于html中文本过多,不想全部展示,多余部分被省略号替代 内容 关于table中td中文本超过td大小设置省略值 展示效果 设置一个table中td文本过长设置省略值,必须 一....

changyinling520 ⋅ 04/26 ⋅ 0

CSS隐藏多余文字的几个方法

通常偏移掉字体的方式是 (1) 使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block 而我们往往有时候想偏移掉的a上的字体 所以问题就来了 text-indent:-9999px;虽然用起来...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

01-UI基础-02UILable

继承关系 一、初始化 二、属性 2.1、text(标签文本) 设置标签显示文本。 2.2、attributedText(标签属性文本) 设置标签属性文本。 2.3、font(字体) 设置标签文本字体。默认是系统自带字体...

口十耳 ⋅ 2016/01/04 ⋅ 0

css防止ul下的li换行(li超出宽度变成…)代码

在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个l...

功夫panda ⋅ 2013/01/09 ⋅ 2

CSS超级压缩工具-命令行版v1.0

功能简述: 纯命令行,无界面! 删除CSS注释。对url(..)及src='..'的路径进行URL编码。删除多余的空白字符。颜色中使用英文单词自动转换为十六进制的颜色值,并且进行简化处理,十六进制颜色...

edielei ⋅ 2012/12/29 ⋅ 13

前端开发规范(HTML)

黄金定律 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。 HTML 两个空格代替制表符(tab)。 嵌套元素缩进两个空格。 属性定义用双引号,绝不使用单引号。 不要...

jedi_knight ⋅ 2015/10/08 ⋅ 0

10个CSS简写及优化技巧

10个CSS简写及优化技巧 CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介...

九夏光年 ⋅ 2017/05/21 ⋅ 0

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页。但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力。 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我...

葡萄城控件技术团队 ⋅ 2016/12/27 ⋅ 0

能让你开发效率翻倍的 VSCode 插件配置(上)

工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、...

王仕军 ⋅ 2017/11/13 ⋅ 0

响应式Web设计——自定义网页字体

多年来我们一直被迫使用一组单调乏味的Web安全字体。当网页设计中确实需要一些优雅的字体时,我们通常都是使用图片来替代,并对元素使用text-indent规则将实际的文本移出视口范围。 曾有一些...

生气的散人 ⋅ 2013/03/07 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JPA入门,配置文件的设置

<?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http......

码农屌丝 ⋅ 19分钟前 ⋅ 0

Java基础——面向对象和构造器

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 静态成员介绍 为什么要有静态成员?静态成员用来...

凯哥学堂 ⋅ 21分钟前 ⋅ 0

vmware中Centos 7 linux的LVM磁盘扩容

系统是RHEL7(centos7差不多一样) 关闭系统,在vmware、设置、硬盘、扩展、输入数字大于当前系统内存、点击扩展。 开机再查看磁盘信息 fdisk -l 注意:可以看出sda磁盘增加了,但是根目录还...

gugudu ⋅ 31分钟前 ⋅ 0

JAVA线程sleep和wait方法区别

昨天面试,突然被问到sleep 和 wait的区别,一下子有点蒙,在这里记一下,以示警戒。 首先说sleep,sleep就是正在执行的线程主动让出cpu,cpu去执行其他线程,在sleep指定的时间过去后,cpu...

徐玉强 ⋅ 33分钟前 ⋅ 0

vuex学习--模块

随着项目复杂性增加,共享状态也越来越多。需要对转态操作进行分组,分组后在进行分组编写。学习一下module:状态管理器的模块组操作。 首先是声明: const moduleA={ state,mutations,g...

大美琴 ⋅ 36分钟前 ⋅ 0

Selenium 简单入门

安装 pip install selenium 驱动下载 https://chromedriver.storage.googleapis.com/index.html 下载最新的驱动,放入path中,可以放入Python的scripts目录下,也可以放入Chrome安装目录,并...

阿豪boy ⋅ 37分钟前 ⋅ 0

292. Nim Game - LeetCode

Question 292. Nim Game Solution 思路:试着列举一下,就能发现一个n只要不是4的倍数,就能赢。 n 是否能赢1 true2 true3 true4 false 不论删除几,对方都能一把赢5 t...

yysue ⋅ 今天 ⋅ 0

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

zip压缩工具 zip命令可以压缩目录和文件,-r 压缩目录。 zip使用方法 zip 1.txt.zip 1.txt //压缩文件 zip -r 123.zip 123/ //压缩目录 unzip 1.txt.zip //解压 unzip 123.zip -d /root/456...

Linux_老吴 ⋅ 今天 ⋅ 0

react-loadable使用跳坑

官方给react-loadable的定义是: A higher order component for loading components with dynamic imports. 动态路由示例 withLoadable.js import React from 'react'import Loadable fro......

pengqinmm ⋅ 今天 ⋅ 0

记录工作中遇到的坑

1、ios safari浏览器向下滚动会触发window resize事件

端木遗风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部