单行居中，2行居左，超过2行省略

最新推荐文章于 2024-05-05 11:27:28 发布
最新推荐文章于 2024-05-05 11:27:28 发布
阅读量589 收藏
点赞数
分类专栏： css、scss 文章标签： css3 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
      body{
        width: 200px;
      }
      div{
        text-align: center;
      }
      p{
        display: inline-block;
        text-align: left;
      }
      span{
        display: -webkit-box; /*设置display，将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 2;   /*限制在一个块元素显示的文本的行数*/
        -webkit-box-orient: vertical; /*规定框的子元素应该被水平或垂直排列*/
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div>
      单行居中
    </div>

    <div>
      <p>
        单行居中，2行居左。
        单行居中，2行居左。
      </p>
    </div>

    <div>
      <p>
        <span>
          单行居中，2行居左。超过2行省略。
          单行居中，2行居左。超过2行省略。
          单行居中，2行居左。超过2行省略。
          单行居中，2行居左。超过2行省略。
        </span>
      </p>
    </div>

  </body>
</html>


宁00
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于 UICollectionViewFlowLayout 的居左居右居中布局
07-09
2. 不同 section 竖直方向 items 对齐方式的设置；3. 不同 section items 排布顺序的设置。因为是继承自 UICollectionViewFlowLayout 所以使用方法跟 UICollectionViewFlowLayout 一致，只需设置对应的属性或者实现...
background: inherit制作倒影、单行居中两行居左超过两行省略
weixin_30810239的博客
01-23 904
1、background: inherit;制作倒影 　　方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化，div大小怎么变化，我们都不用去改我们的代码。 　　-webkit-box-reflect 　　这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。 　　box-reflect有四个方向可以选，below | abov...
有趣的CSS-- 单行居中，两行居左，超过两行省略
江木
11-08 1581
单行居中显示文字，多行居左显示，最多两行超过用省略号结尾 这题就厉害了我的哥。 题目就是如上要求，使用纯 CSS，完成单行文本居中显示文字，多行居左显示，最多两行超过用省略号结尾，效果如下： 不愿看长篇大论的可以先看看效果： 接下来就一步一步来实现这个效果。   首先是单行居中，多行居左 居中需要用到 text-align:center，居左是
CSS文本超出2行就隐藏并且显示省略号,单行居中，两行居左
csl125的博客
10-19 1601
css的基础属性 : overflow:hidden;            //超出的文本隐藏  text-overflow:ellipsis;     //溢出用省略号显示 white-space:nowrap;         //溢出不换行,只能显示一行 css3属性 : display:-webkit-box;            //将对象作为弹性伸缩盒子模型显示。 ...
icss学习之单行居中，多行居左，超过省略
weixin_46727994的博客
11-18 396
<div class="container"> <h2><p>我是单<em>行标题居中</em></p></h2> <h2><p>我是两<em>行标题两行标题两行标题居左</em></p></h2> <h2><p>我是<em>超过两行的标题最后点号省略我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略省
css 实现单行居中，多行居左省略
个人前端记录
08-31 1929
—– START —–单行居中实现很简单，多行居左也很简单，多行省略也就是几行代码的事情 看HTML最基本的HTMl架构，容器是div，代码很简单，这个代码可以实现单行居中，也可以实现多行居左 为什么？ 利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左下面是多行文本超出的省略，这个也简单，借用css3中的box
css 文字（单行居中 超出居左 || 单行文本省略 多行文本省略）
mcsddnn的博客
12-20 416
【代码】css 文字（单行居中 超出居左 || 单行文本省略 多行文本省略）
CSS特效（7）——单行居中，多行居左，超过两行用省略号
weixin_34101229的博客
09-07 83
单行居中，多行居左，超过两行用省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
单行居中显示文字，多行居左显示，最多两行超过用省略号结尾
进击的葱
12-01 230
转——https://www.cnblogs.com/vanstrict/p/5923633.html   首先是单行居中，多行居左 居中需要用到 text-align:center，居左是默认值也就是text-align:left。如合让两者结合起来达到单行居中，多行居左呢？这就需要多一个标签，假设一开始我们定义如下： &lt;h2&gt;单行居中，多行居左&lt;/h2&gt; 现...
谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略
weixin_33919941的博客
09-27 52
开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一...
Css设置img属性让图片水平居中/居左/居右的写法
09-25
图片的居中显示css有很多方法，但在很多情况下有的方法无效，无意发现这个系统的官方处理图片居中，居左，居右的css写法，喜欢的朋友可以收藏下哦
IE9下DIV本来应该居中的结果显示为居左
09-25
在IE9下面本来应该居中的，结果显示为居左，在IE9以上的版本中，只需要设置 margin：0px auto; 就可以使得DIV居中，下面的示例，大家可以参考下
jQuery弹出窗口完整代码(居中,居左,居右)
12-11
核心代码： 代码如下://获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height();...
[C#] datagrid元素居中
12-14
可以看到元素都在最左边，看起来并不美观因此要让元素居中。 第一步设置header居中 MainWindow.xaml //关键在于header类型设置 第二步设置App.xaml 在Application.Resources里设置好类型。 第三步修改...
探索CSS3文本效果：打造魅力无限的网页排版
艾恩小灰灰的博客
05-05 587
CSS3允许你嵌入自定义字体，丰富文本风格。首先定义了一个名为"MyFont"的自定义字体，然后在类中应用该字体。CSS3为文本效果的创作开辟了广阔的天地，无论是简单的阴影和描边，还是复杂的渐变和动画，都能极大地提升网页的视觉吸引力和用户体验。希望本文的介绍和代码示例能激发你的灵感，让你在下一次的项目中尝试这些技巧，打造出独一无二的网页设计作品。
CSS3（响应式布局）
l_al_al_a的博客
04-27 2011
/只在x方向上重复。//只在y方向上重复。//前一个时间用于表示过渡效果持续时间，后一个时间用于表示过渡效果的延迟。# 和 #注意：其中angle对应单位为：deg。# 及 #
node-v4.8.6-win-x64.zip
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基础运维技能（下）md格式笔记
最新发布
05-07
基础运维技能（下）md格式笔记
el-table某行居左
09-09
要使el-table中的某一行居左，可以在el-table-column中设置align属性为"left"。例如，在给定的代码中，可以将align属性设置为"left"，如下所示： ```html 日期" align="left" width="180"> ``` 这样，日期列中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值