正文

css小技巧 --> 单标签实现单行文字居中，多行文字居左

IP云
IP云V管理员/5 阅读
08/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

可能出现的尺寸场景:

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.text {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<p class="text">这是一段文本，可能很长，可能很短。</p>
</body>
</html>

css小技巧 --> 单标签实现单行文字居中，多行文字居左的更多相关文章

  1. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  2. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  3. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  4. css--实现一个文字少时居中，文字换行时居左的样式

    前言 最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示.", ...

  5. Css 小技巧总结

    相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...

  6. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  7. CSS 小技巧 &vert; 一行代码实现头像与国旗的融合

    到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...

  8. 模仿也是提高，纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  9. CSS小技巧-怎样让每行多余的文字显示文省略号？

    1.white-space:nowrap 如果是中文,则需要设置行末不断行 2.overflow:hidden 设置超出控件范围隐藏 3.text-overflow:ellipsis

随机推荐

  1. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

  2. dvd开发小程序

    package dvdManager8; import java.util.Scanner; public class DvdSystem8 { static String[][] dvd = new ...

  3. Spring 定时任务1

    转载自 http://blog.csdn.net/prisonbreak_/article/details/49180307 Spring配置文件xmlns加入 xmlns:task="ht ...

  4. 使用ExceptionHandlingScope进行高效的SharePoint CSOM编程

    异常处理 在我们使用SharePoint API的时候,获取某些对象的时候,可能会出异常,那么CSOM如何处理这种情况呢. 我们在获取某个List的时候,代码如下: using (ClientCont ...

  5. AngularJS 3

    AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...

  6. UGUI和现实世界的比例关系

    之前测试过默认大小的 Cube 在现实中的 比例关系,得出基本单位为 m 的结论,至于 UGUI和现实世界的比例关系 看下图就知道了: Cube Collider 的大小: Button 的大小: 其 ...

  7. PHP 安装使用 gearman

    1.安装服务器端: 官方下载,请到https://launchpad.net/gearmand. yum install boost-devel* gperf* libevent-devel* lib ...

  8. 模板方法模式&lpar;Tempalte Method Pattern&rpar;

    模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有 ...

  9. bootstrap&mdash&semi;&mdash&semi;bootstrap-table（2）

    先看问题现象: 问题描述: 点击"管理子账号"按钮,预期是按照传递的参数更新列表数据,但是最后才发现这个列表根本不会刷新,只会继承前一次的数据,意思也就是不会去请求第二次. 解决方 ...

  10. &lbrack;源码分析&rsqb;StringBuffer

    [源码分析]StringBuffer StringBuffer是继承自AbstractStringBuilder的. 这里附上另外两篇文章的连接: AbstractStringBuilder : ht ...