css3文本缩进 && 文本超过两行用省略号表示

最新推荐文章于 2024-09-05 11:30:24 发布

不再重要

最新推荐文章于 2024-09-05 11:30:24 发布

阅读量2.8k

点赞数

文章标签：文本首行缩进文本超过两行用省略号表示

本文链接：https://blog.csdn.net/weixin_42046201/article/details/82145798

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<p>看的积分换会计师对福建省的粉红色的尽快发货肯定就是发货速度快解放后速度快解放后速度快解放后谁看得见发货速度快解放后思考积分兑换按时客户经理卡收到货侃大山</p>
</body>
</html>

效果图

文本首行缩进

        p{
           text-indent: 2em;
        }

效果图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不再重要

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

文字根据图片环绕 + 显示文字两行后省略号

李小狮

11-09

704

首先看布局： “拼团价” 这里是图片，标题文字要环绕，第二行文字要在图片的下面 1、正常的做法是：设置图片float，这样就可以实现； .info-content_title{ clear: both; } .content-title_logo{ float: left; } <view class="info-content_title"> <image class="content-title_logo" src="../img/groupBookin

CSS文本属性之文本缩进、行间距

WangZhang_521的博客

12-23

1117

04-文本缩进 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

参与评论您还未登录，请先登录后发表或查看评论

CSS中特殊类型的选择器伪元素如何使用

最新发布

wangyufei0815的博客

09-05

601

在 CSS 中，伪元素是一种特殊类型的选择器，它允许你为元素的特定部分添加样式，而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果，如添加边框、背景、阴影等，而不需要额外的 HTML 标记。伪元素以两个冒号（）开头，与伪类（一个冒号，）区分开来。最常见的伪元素包括：1.::before：在元素的内容之前插入内容。2.::after：在元素的内容之后插入内容。

CSS 实现的文本过滤 -webkit-line-clamp

weixin_30764137的博客

12-23

190

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。-webkit-box-orient 必须结合的...

css实现文字超出两行部分显示省略号

lyd的博客

09-26

1897

css实现文字超出两行部分显示省略号 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; //单行超出部分显示省略号 overflow:hidden; text-overflow:ellipsis; white-sp...

css3 两行溢出

杨鑫的博客

04-24

2656

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;

CSS3设置文字最少显示2行，超过长度用省略号代替

suyuanyuan2015015413的博客

11-08

2217

CSS3 关于文字处理的样式学习 text-overflow属性 div.test{ text-overflow:ellipsis; } 默认值是clip 语法： text-overflow: clip|ellipsis|string; clip: 修剪文本 ellipsis：显示省略符号来代表被修剪的文本 string：使用给定的字符串来代表被修剪的文本最近需要做一个商品列表，在手...

从零学CSS系列之文本属性

10-25

`能让文本在超出容器宽度时显示省略号，提示用户文本未完全显示。 `text-shadow`属性为文本添加阴影效果，增强了视觉的层次感和美感。它需要指定阴影偏移、模糊半径以及阴影颜色。例如，`text-shadow: 0 1px 0 rgba...

CSS 文本超出两行显示省略号

m0_65284931的博客

07-10

3179

// 文本超出两行显示省略号 注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用 div { width: 300px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } // 单行文本超出显示省略号 div { width: 300.

CSS 实现文本“不定行数“截断

厦门在乎科技

10-25

381

偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是"不定行"的。详细规则如下：整个容器高度是固定的，标题和内容总共 3 行标题最多2行，超出省略内容由剩余空间决定，如果标题占2行，则内容超出1行省略；如果标题占1行，则内容超出2行省略是不是很灵（离）活（谱）的交互？可以充分利用页面空间，保证标题和内容都能展示出来看了下原站的实现，是通过 js 判断标题高度，然后动态添加一个类名实现的。不过呢，经过一番琢磨，这里也是可以纯 CSS 实现的，一起来看看吧

CSS文本两行或多行,超出用省略号(...)表示

热门推荐

人间真的不值得的博客

02-11

1万+

废话不多说,直接上代码 <div class="line style"> 内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分 </div> <style> .style{ width:200px; } </style> 此时的效果图文本超出一行用省略号(…)显示 //一行显示 .line{ wh

【CSS基础】基础选择器+字体文本相关样式

qq_59084325的博客

09-12

1452

【CSS基础】基础选择器+字体文本相关样式（超详细）

line-height 行间的距离

qq_16714671的博客

01-07

568

line-height 表示行间距大小。测量方式为：最上行顶端到下行顶端的距离代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com

HTML/CSS class3文本标签

郭栋的专栏

08-11

328

CSS处理文字段落尾行行末缩进，点击查看更多展开效果

weixin_59245513的博客

04-03

3800

我们可以通过判断.text元素的高度是否大于父元素的max-height 100px 来控制查看更多按钮的显隐，当点击查看更多切换时，父元素高度改为和子元素通高，或者去除/添加overflow-hidden属性即可。但是我们还有一个查看更多的按钮来控制内容显隐，要如何实现呢，现在我们有一种新思路，-webkit-line-clamp: 2;如图：第三行文末需要展示省略号，并且有查看更多按钮，切换显示隐藏。利用伪类视觉看起来有渐变淡出效果。

CSS打造末尾自动伸缩的菜单

何东狮吼

07-21

1031

菜单1菜单2

css3 文本第二行缩进

wangatong的博客

02-16

1300

text-indent: -1.1em; margin-left: 1em;

使用css3实现文本超出省略号和多行省略号

sushuyan的博客

04-27

1459

单行隐藏 overflow:hidden; （超出部分隐藏） text-overflow:ellipsis;（隐藏部分用省略号） white-space:nowrap；（不换行）多行隐藏 overflow: hidden;（超出部分隐藏） text-overflow: ellipsis; （隐藏部分用省略号） display: -webkit-box; -webkit-line-...

css利用text-indent负值和padding-left设置第二行缩进

qq_42372534的博客

04-23

457

【代码】css利用text-indent负值和padding-left设置第二行缩进。

HTML CSS3 3文本格式化标签 div和span标签图像标签img

weixin_43960370的博客

03-02

206

文章目录文本格式化标签盒子标签HTML常用标签注意事项文本格式化标签优先使用第一种，语义更强烈。熟练掌握 strong em del ins 标签盒子标签 div和span都是盒子标签，用来布局，div表示的范围更大。 HTML常用标签注意事项 ...