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

可能出现的尺寸场景:

代码如下：

<!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>

转载于:https://www.cnblogs.com/wangjae/p/11504551.html

css小技巧 -- 单标签实现单行文字居中，多行文字居左相关推荐

css实现一行文字居中,多行文字左对齐
思路一个div里面搞个span,div给text-align: center,span设置成行内块级元素,并给text-align: left 示例如果换不了行,记得加个word-break: b ...
css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
前端html小技巧—input标签详解
今天分享下前端html小技巧-input标签详解 ,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. 定义和用法 inp ...
小技巧-i标签与em标签和b标签与strong标签的区别
小技巧-i标签与em标签和b标签与strong标签的区别 b标签和strong标签都可以对文本进行加粗,i标签和em标签同样也可以对文本进行倾斜,但是strong和em有强调的作用,有利于SEO(搜索 ...
10 个不错的 CSS 小技巧
本文为译文,采用意译. CSS 大约有两百个属性.很多属性都是相互关联的,理清楚每一个属性细节是不可能的.所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考. 1. 打字效果 Typin ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...

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

css小技巧 -- 单标签实现单行文字居中，多行文字居左相关推荐

最新文章

热门文章