文档章节

关于固定高度和宽度,文字多少控制问题

豆豆麻麻
 豆豆麻麻
发布于 2016/11/01 17:01
字数 178
阅读 8
收藏 0

今天在写页面的时候,遇到了一个显示问题,我的要求是:在一个固定长和宽的盒子中,文字若多了末尾显示“...”

首先要让文字显示“...”,给盒子加的样式是:

.intro .docIntro .docGood {
    width: 100%;
    line-height: 1.5;
    font-weight: bolder;
    font-weight: 400;
    text-indent: 1em;
    height: auto;
    max-height: 4.5em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

以上显示的样式虽然有了“...”的效果,但是多余的文字还是会显示在下一行。如图:

然后,为了解决这个问题,给样式再加一个

overflow: hidden;

这样就正常了。哈哈~~~

-webkit-line-clamp: 3;

这行代码是最多显示3行的意思哦@@

© 著作权归作者所有

豆豆麻麻
粉丝 9
博文 27
码字总数 4005
作品 0
南京
前端工程师
私信 提问
css高级应用三种方法实现多行省略

前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用的方案。 如果你看到这篇文章,可能代表你正是从那么多千篇一...

pekonchan
04/12
0
0
IOS 6.0+ Autolayout — UITableViewCell 高度调整

要实现的效果 要求: 一般titleLabel 仅显示一行标题,高度为固定。 imageview 大小也为固定。 detailLabel 宽度固定,但高度根据文本动态调整。 cell 底部拒imageview 的底部以及detailLab...

Carson6931
2015/01/03
7.7K
15
设置table中的宽度不随文字改变让其固定

设置table中的宽度不随文字改变让其固定 来源:互联网作者:佚名时间:02-17 16:02:28【大 中 小】 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有个不错的方...

什么是程序员
2015/11/05
1K
0
android drawText测量文字宽度和高度的几种方法

最近接触的项目里,有自定义文字控件的内容,在onDraw的时候需要用canvas画到画布上,这就牵扯到测量文字的宽度和高度(主要是文字的坐标)了,首先,先去这个网址学习一下关于文字的相关知识...

fantasiter
2016/03/14
766
0
小记css中float浮动问题

脱离了tabel布局的时代,div+css的布局使我们的网站更加灵活易用,但是发现初学者总是不约而同的犯同样的错误,且有些还屡犯不改,呵呵,我想大约与我一样,很多时候做事情只追求“解决”,而...

Rella蕾拉
2012/08/09
361
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.6K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部