可能出现的尺寸场景:

代码如下：

<!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 小技巧 | 一行代码实现头像与国旗的融合

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

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

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

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

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

随机推荐

  1. IOC注解方式1.0

    在spring4之后,想要使用注解形式,必须得要引入aop的包 在配置文件当中,还得要引入一个context约束 <?xml version="1.0" encoding=& ...

  2. gogs 邀请协作者 500错误

    触发原因: 对db文件的user表删了某个用户导致 解决: 注册个新用户,把id改成原来的id(默认都会自增长)

  3. Qt源码学习之路（2） QCoreApplication（1）

    QCoreApplication最重要的函数便是exec(),我们便从这个函数开始分析QCoreApplication都干了什么. 先列出exec()函数的源码 static int exec();/ ...

  4. .py .pyc .pyd .pyw文件区别

  5. 实现RTSP摄像机硬盘录像机NVR网站网页微信H5直播方案EasyNVR部署问题之：ERR_CONTENT_LENGTH_MISMATCH

    背景分析 接触到EasyNVR产品的开发者都知道,EasyNVR是一套功能齐全.简洁易用的流媒体解决方案,可作为能力曾前端接入摄像头,后端接入业务系统使用,也可以作为应用层,直接修改为属于企业用户自己 ...

  6. [LeetCode] 375. Guess Number Higher or Lower II 猜数字大小 II

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  7. 一键安装docker-ce

    curl https://get.docker.com |env CHANNEL=stable sudo sh -s docker --mirror Aliyun

  8. 【Flume学习之二】Flume 使用场景

    环境 apache-flume-1.6.0 一.多agent连接 1.node101配置 option2 # Name the components on this agent a1.sources ...

  9. 阿里云移动推送 安卓项目添加SDK步骤

    Gradle的Emas服务插件会加载您下载的 aliyun-emas-services.json 文件.请修改工程的build.gradle使用该插件.配置步骤如下: 1. 修改项目级目录下build ...

  10. python random模块（14）

    random 模块包括返回随机数的函数,可以用于模拟或者任何产生随机输出的程序. 一.random模块常用函数介绍 random.random() — 生成一个从0.0(包含)到 1.0(不包含)之间 ...