多行文字自动换行居中--实测好用的很OK
实测好用的很~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
}
.outDiv .innerDiv1 {
display: inline-block;
vertical-align: middle;
}
.outDiv .innerDiv-fix {
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
</style>
</head>
<body>
<div class="outDiv">
<span class="innerDiv1">多行文字自动换行居中</span><span class="innerDiv-fix">
<!-- 此标签不能换行 --></span>
</div>
</body>
</html>
多行文字自动换行居中--实测好用的很OK的更多相关文章
- UIlabel多行文字自动换行 （自动折行）
UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(, , , )]; UILabel *label = [[UILabel al ...
- css设置文字上下居中，一行文字居中，两行或多行文字同样居中。
转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...
- css文字上下居中，一行文字居中，两行或多行文字同样居中
附图: 1. 利用Flex布局实现 demo.html <div class="demo demo-flex"><span>孤云将野鹤,岂向人间住.莫买沃洲 ...
- css--实现一个文字少时居中，文字换行时居左的样式
前言 最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示.", ...
- 纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- 实现多行文字居中方法（兼容IE6）
<p class="mulit_line"> <span style="font-size:12px;">这里是高度为150像素的标签内 ...
- 多行文字垂直居中（完美兼容chrome firefox IE6 7 8 9）
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...
- div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
- 多行文字水平垂直居中在div
<BODY> <div class="box"> <h3>1.单行文字居中</h3> <!--设置行高来实现- ...
随机推荐
- 驱动开发：内核监视LoadImage映像回调
在笔者上一篇文章<驱动开发:内核注册并监控对象回调>介绍了如何运用ObRegisterCallbacks注册进程与线程回调,并通过该回调实现了拦截指定进行运行的效果,本章LyShark将带 ...
- 前后端分离项目(十一):实现"删"功能(前后端)
好家伙,本篇介绍如何实现"删"功能 来看效果, 数据库 (自然是没什么毛病) "增"搞定了,其实"删"非常简单 (我不会告诉你我是为了水一 ...
- 虚拟机VMware运行Ubuntu时无法和主机之间复制粘贴的问题
解决虚拟机VMware运行Ubuntu时无法和主机之间复制粘贴的问题 执行以下命令并重启即可解决 sudo apt-get autoremove open-vm-tools sudo apt-get ...
- JavaScript之数组高阶API—reduce()
一文搞懂JavaScript数组中最难的数组API--reduce() 前面我们讲了数组的一些基本方法,今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数,那么这篇文章就好好 ...
- vue 使用vuex 刷新时保存数据
created () { this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getIte ...
- clickhouse在风控-风险洞察领域的探索与实践
一.风险洞察平台介绍 以Clickhouse+Flink实时计算+智能算法为核心架构搭建的风险洞察平台, 建立了全面的.多层次的.立体的风险业务监控体系,已支撑欺诈风险.信用风险.企业风险.小微风险. ...
- Atlassian Confluence 远程代码执行漏洞（CVE-2022-26134）漏洞复现
目录 免责声明: Atlassian Confluence 远程代码执行漏洞(CVE-2022-26134)漏洞复现 漏洞概述: 影响版本: 漏洞复现: 利用POC: 利用过程: 修复建议: 参考 免 ...
- 【OpenStack云平台】SecureCRT 连接 CentOS虚拟机
1.安装SecureCRT SecureCRT是一款支持SSH等协议的终端仿真软件,可以在windows下登录Linux服务器,这样大大方便了开发工作.安装SecureCRT可以通过网上的各种教程安装 ...
- 【devexpress】spinEdit控件如何设置只能输入两位小数
只需设置对应的正则表达式即可,我这里设置的是n2意思就是两位小数的意思 效果如下
- Mybatis-Plus通用枚举 -基于jackson（Springboot-web内置）
枚举类 使用 @EnumValue注解标识数据库字段 package com.example.enumpackage; import com.baomidou.mybatisplus.annotati ...