学习《css世界》笔记之使用overflow做文字溢出点点点效果

效果图
在这里插入图片描述
HTML

		<p class="p1">qwertyuiopasdfghjklzxcvbnm</p><div class="d1"><p> 冯塘村过去经济较为落后。几年前,镇里以400多年的冯塘古村为基础,引来社会资金投资休闲农庄和共享民宿,把这里建设成了一个集生态农业、创意农业、旅游观光、休闲体验、果蔬采摘、农产品生产加工等为一体的乡村生态旅游区。</p></div>

CSS

		.p1{width: 200px;text-overflow: ellipsis;white-space: normal;overflow: hidden;}.d1{width: 200px;border: 1px solid #FF0000;}.d1 p{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}

ps:在p标签中使用全英文如

<p class="p1">qwertyuiopasdfghjklzxcvbnm</p>

是不会自动换行的,需要修改p标签的换行规制,

p{word-wrap:break-word;
// 或者 word-break: break-all;
}

释义:
1.white-space:设置如何处理元素间的空白,默认为normal,表示空白会被浏览器忽略,white-space: nowrap;表示不换行。
2.word-break:规定自动换行的处理方法。normal:使用浏览器默认换行规则,break-all:允许在单词内换行,keep-all:只能在半角空格或连字符处换行。
3.word-wrap:允许长单词或URL地址换行到下一行。normal:只在允许的断字点换行(浏览器保持默认处理),break-word:在长单词或URL地址内部进行换行。
若两个属性同时存在,以word-break: break-all;为准。

建议使用p标签测试时,使用中文

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402772.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于 部署方面研究 Visual Studio 2013

InstallShield2013LimitedEdition 下载地址 http://download.csdn.net/download/yuanyuan_186/7681385 转载于:https://www.cnblogs.com/tianheBologs/p/5996361.html

Portal-Basic Java Web 应用开发框架:应用篇(十四) —— 异步 Action

Portal-Basic Java Web应用开发框架&#xff08;简称 Portal-Basic&#xff09;是一套功能完备的高性能Full-Stack Web应用开发框架&#xff0c;内置稳定高效的MVC基础架构和DAO框架&#xff08;已内置Hibernate、MyBatis和JDBC支持&#xff09;&#xff0c;集成 Action拦截、F…

类似No module named 'bs4'等错误的解决方法

from: https://www.cnblogs.com/xisheng/p/7856334.html 最近开始接触爬虫&#xff0c;写了如下源代码&#xff1a; from bs4 import BeautifulSoup import requests urlhttps://www.tripadvisor.cn/Attractions-g60763-Activities-New_York_City_New_York.html wb_datereque…

C. Vanya and Scales

C. Vanya and Scalestime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutputstandard outputVanya has a scales for weighing loads and weights of masses w0, w1, w2, ..., w100 grams where w is some integer not less than 2(exac…

js_组合继承(最常用的继承方式)

<script type"text/javascript">//组合继承: 将原型链和借用构造函数的技术组合在一起//使用原型链实现对原型方法的继承//使用构造函数实现对实例属性的继承//js中最常用的继承方式//super:超类function SuperType(name) {//超类属性//使用构造函数实现对实例…

Hello World(本博客启程篇)

Hello World 作为本博客第一篇日志&#xff0c;作为程序员&#xff0c;无论走到哪里&#xff0c;做什么事&#xff0c;必须先输出这句话。 一个想法  从今天3月份到现在一直在学技术&#xff0c;过程中坑的解决、知识的总结以及想法等都写到了“有道云笔记”。 写有道云笔记的…

php7.2 event扩展php_sockets_le_socket错误解决

环境: [rootlocalhost php.d]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [rootlocalhost php.d]# php -v PHP 7.2.10 (cli) (built: Sep 15 2018 07:10:58) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-201…

NYOJ_37_回文字符串

首先&#xff0c;我们把字符串反转&#xff0c;然后用反串和原串求最大公共子序列&#xff0c;再用字符串长度减去最大公共子序列的长度就是答案&#xff0c;我们还可以用滚动数组优化内存 状态转移方程&#xff1a; (i长度的a串和j长度的b串的最长公共子序列长度&#xff09; …

js中的Object.create(null) 和 {} 的区别

console.log(Object.create(null))console.log({})结果图 根据结果我们不难发现&#xff0c;两者最大区别在于Object.create(null)创建的对象没有继承Object 所有Object.create(null)创建的对象也没有Object提供的方法&#xff0c;是一个非常纯净的对象 ps: Object.create(obj…

matplotlib —— 添加文本信息(text)

matplotlib.pyplot.text(x, y, s, fontdictNone, withdashFalse, **kwargs) x, y&#xff1a;表示坐标&#xff1b;s&#xff1a;字符串文本&#xff1b;fontdict&#xff1a;字典&#xff0c;可选&#xff1b;kw&#xff1a; fontsize12,horizontalalignment‘center’、ha’c…

值得推荐的C/C++框架和库 (真的很强大)

From: https://blog.csdn.net/u011628751/article/details/69258637/ 值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具。它使用fork()模拟多个客户端同时访问我们设定的URL&#xff0c;测试网站在压力下工作的性能&#xff0c;…

java web 中的转发和重定向路径问题

为什么80%的码农都做不了架构师&#xff1f;>>> 假设应用程序的 contextPath 为 /ctx&#xff0c;在 http://localhost:8080/ctx/a/b 资源中&#xff0c;我们转发和重定向到 http://localhost:8080/ctx/x/y 资源&#xff0c;分别应该怎么写&#xff1f; 转发&…

断言assert使用方法

测试代码 console.log(开始)console.assert(true, true)console.assert(false,false)console.log(结束)结果 可以发现&#xff1a; assert方法中&#xff0c;第一个参数是判断条件&#xff0c;当为true时&#xff0c;不执行 。当为false时&#xff0c; 输出后面提示内容 且我们…

AngularJs学习笔记(四)

1、AngularJs中的Module可以包含哪些组件&#xff1f;&#xff08;1&#xff09;value&#xff1a;保存可以在不同的controller之间共享的对象、数据&#xff08;2&#xff09;constant&#xff1a;保存可以在不同的controller之间共享的常量&#xff08;3&#xff09;service&…

[你必须知道的异步编程]——异步编程模型(APM)

本专题概要&#xff1a;引言你知道APM吗&#xff1f;你想知道如何使用异步编程模型编写代码吗&#xff1f;使用委托也可以实现异步编程&#xff0c;你知道否&#xff1f;小结一、引言在前面的C#基础知识系列中介绍了从C#1.0——C#4.0中一些主要特性&#xff0c;然而.NET 4.5更新…

[libuv] libuv安装

环境: centos7.2, gcc,g version: 4.8.5 yum install -y libuv libuv-devel

pc浏览器内核详解

浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心&#xff0c;也称“渲染引擎”&#xff0c;用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同&#xff0c;因此网页开发者需…

iOS 10 的一个重要更新-自定义的通知界面

续上篇&#xff0c;在简单闹钟的例子上&#xff0c;在通知界面上显示图片动画&#xff0c;并用通知关联的按钮更新通知界面。介绍 iOS 10 通知 API 的扩展&#xff1a;自定义通知显示界面。 新框架可以统一处理本地通知和远程推送&#xff0c;同时增加了一些新 API 来控制等待中…

[USACO 1.3.3]Calf Flac

o(︶︿︶)o 烦躁&#xff0c;看了半天没看懂这个O(n)的回文串算法是什么东西&#xff0c;直接套上模板就交了。然后AC了 题目&#xff1a; Description 据说如果你给无限只母牛和无限台巨型便携式电脑(有非常大的键盘),那么母牛们会制造出世上最棒的回文。你的工作就是去这些牛…

[libuv] libuv学习

From: https://www.mobibrw.com/2016/3490 libuv 是重写了下libev&#xff0c;封装了windows和unix的差异性。 libuv的特点 非阻塞TCP套接字 socket&#xff1f; 非阻塞命名管道 UDP 定时器 子进程 fork? 通过 uv_getaddrinfo实现异步DNS 异步文件系统API uv_fs_* 高分辨率时…