可能出现的尺寸场景:

代码如下：

<!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. Microsoft SQL Server 2008 R2 安装遇到的问题

    SQL Server 安装过很多次了,第一次遇见这样的问题: TITLE: Microsoft SQL Server 2008 R2 安装程序----------------------------- ...

  2. axios与ajax的区别及中文用户指南

    Ajax: Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. $.ajax({ ty ...

  3. redis 锁的案例

    1: redis 锁 作为一种术装饰器使用 基本逻辑: 1:声明一个redislock类  定义生成锁和释放锁两个方法 2:生成锁使用了一个默认值 setnx ; 如果当前时间大于 第一次锁的生成时间 ...

  4. ISO/IEC 9899:2011 条款6——语言

    6 语言 6.1 标记法 1.在本条款中所使用的语法标记法.语义类别(非终结符)用斜体字指示,而字面量单词以及字符集成员(终结符)用粗体字指示.跟在一个非终结符后面的冒号(:)引出其定义.在单独的行中 ...

  5. 分类的性能评估：准确率、精确率、Recall召回率、F1、F2

    import numpy as np import pandas as pd from sklearn.feature_extraction.text import TfidfVectorizer f ...

  6. Jenkenis报错：该jenkins实例似乎已离线

    使用运行war的形式安装jenkins,因为伟大的墙出现,“该jenkins实例似乎已离线” 问题 解决方法: 1. 保留此离线页面,重新开启一个浏览器tab标签页 2.输入输入网址http://lo ...

  7. 如何配置STP

    一.搭建本次实验的拓扑结构 两台s5700交换机模拟核心交换,两台s3700交换机模拟接入交换机,核心上配置eth-trunk   二.开启所有交换机的stp功能 开启stp [S1]stp enab ...

  8. 各种实用的 PHP 开源库推荐【转】

    转自: https://my.oschina.net/editorial-story/blog/882780 PHP 是一种通用开源脚本语言.语法吸收了 C 语言.Java 和 Perl 的特点,利于 ...

  9. LeetCode 343. 整数拆分(Integer Break) 25

    343. 整数拆分 343. Integer Break 题目描述 给定一个正整数 n,将其拆分为至少两个正整数的和,并使这些整数的乘积最大化. 返回你可以获得的最大乘积. 每日一算法2019/5/2 ...

  10. 15.Python略有小成(内置模块Ⅰ)

    Python(内置模块Ⅰ) 一.序列化模块(很重要) 序列化 : 将一种数据结构(,list,dict...),转化成一个特殊的字符串的过程 我们现在要解决的问题 : 如果有一种特殊的字符串,这个字符 ...