可能出现的尺寸场景:

代码如下：

<!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. MySQL服务问题

    Mysql使用命令 net start mysql net stop mysql 出现如下报错 经过查询得知可能是安装时修改过服务名称 查看服务名称的方法:这台电脑右键->管理->服务和应 ...

  2. 第07组 Beta冲刺（1/5）

    队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:代码编辑器 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教小姐姐) ...

  3. 第07组 Alpha事后诸葛亮

    1.请在博客开头给出组长博客链接(3.1 2分) 团队:摇光 队长:杨明哲 组长博客:这里 2.参考邹欣老师的问题模板进行总结思考(3.2 27分) 设想和目标(2分) 1.我们的软件要解决什么问题? ...

  4. gitignore文件示例

    /target/ !.mvn/wrapper/maven-wrapper.jar ### STS ### .apt_generated .classpath .factorypath .project ...

  5. php composer 报错 requires php ^7.1.8 || ^8.0 -> your php version

    php 环境变量版本低于7.1.8,更新php环境变量版本

  6. 转：laydate只显示时分，不显示秒

    @转载地址 原文全文: 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_40 ...

  7. Spring MVC -- 表达式于语言（EL）

    JSP 2.0最重要的特性之一就是表达式语言(EL),JSP用户可以用它来访问应用程序数据.由于受到ECMAScript和XPath表达式语言的启发,EL也设计成可以轻松地编写免脚本(就是不用在jsp ...

  8. Nginx - 代理后端通过域名访问

    目录- 前言- Nginx 根据域名反向代理- Nginx proxy_pass 关于 '/' 的作用 1. 前言 接到一个需求,通过nginx 代理互联网上某一个页面,刚开始的时候觉得很简单的,直接 ...

  9. nginx+consul-template+consul实现自动负载均衡

    所需工具:工具 下载地址 本文使用版本consul https://www.consul.io/downloads.html consul_1.0.7_linux_amd64.zipconsul-te ...

  10. 【VS开发】#pragma pack(push,1)与#pragma pack(1)的区别

    这是给编译器用的参数设置,有关结构体字节对齐方式设置, #pragma pack是指定数据在内存中的对齐方式. #pragma pack (n)             作用:C编译器将按照n个字节对 ...