实测好用的很~~~

<!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的更多相关文章

  1. UIlabel多行文字自动换行 （自动折行）

    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(, , , )]; UILabel *label = [[UILabel al ...

  2. css设置文字上下居中，一行文字居中，两行或多行文字同样居中。

    转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...

  3. css文字上下居中，一行文字居中，两行或多行文字同样居中

    附图: 1. 利用Flex布局实现 demo.html <div class="demo demo-flex"><span>孤云将野鹤,岂向人间住.莫买沃洲 ...

  4. css--实现一个文字少时居中，文字换行时居左的样式

    前言 最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示.", ...

  5. 纯CSS实现文字一行居中，多行左对齐的方法

    其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

  6. 实现多行文字居中方法（兼容IE6）

    <p class="mulit_line"> <span style="font-size:12px;">这里是高度为150像素的标签内 ...

  7. 多行文字垂直居中（完美兼容chrome firefox IE6 7 8 9）

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  9. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  10. 多行文字水平垂直居中在div

    <BODY>   <div class="box">    <h3>1.单行文字居中</h3>    <!--设置行高来实现- ...

随机推荐

  1. 空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别

    空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别在 ...

  2. nrf52——DFU升级OTA升级方式详解(基于SDK开发例程)

    在我们开始前,默认你已经安装好了一些基础工具,如nrfutil,如果你没有安装过请根据官方中文博客去安装好这些基础工具,连接如下:Nordic nRF5 SDK开发环境搭建(nRF51/nRF52芯片 ...

  3. 五、docker网络

    一.Docker 网络 docker网络主要是解决容器联网问题,也是我们使用容器中最重要的一个环节,如果容器没有网络则无法向网络中提供服务. 网络管理命令:docker network [root@z ...

  4. Codeforces 1670 E. Hemose on the Tree

    题意 给你个数p,n = 2^p: 有一棵树有n个节点,告诉你怎么连边: 每个点有个权值,每条边也有个权值,权值需要自行分配,[1,2,3..n...2n-1],总共2n-1个权值: 你需要选一个节点 ...

  5. 【lwip】10-ICMP协议&源码分析

    目录 前言 10.1 ICMP简介 10.2 ICMP报文 10.2.1 ICMP报文格式 10.2.2 ICMP报文类型 10.2.3 ICMP报文固定首部字段意义 10.3 ICMP差错报告报文 ...

  6. go mod常用命令 已经 常见问题

    最近接触到go mod,网上查了查资料,这里记录一下. 1 介绍 1.1.go mod是什么 go mod 是Golang 1.11 版本引入的官方包(package)依赖管理工具,用于解决之前没有地 ...

  7. 你听说过OTA吗?

    以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」https://mp.weixin.qq.com/s/M660Sc4ey1SxCpRT6vcM9g what? 不知有多少 ...

  8. Encodings: URL

    原题链接:http://www.wechall.net/challenge/training/encodings/url/index.php 题目信息:你的任务就是解码下面的东西.... 这个完全没难 ...

  9. elasticsearch 之 histogram 直方图聚合

    目录 1. 简介 2. bucket_key如何计算 3. 有一组数据,如何确定是落入到那个桶中 4.需求 4.1 准备mapping 4.2 准备数据 5.histogram聚合操作 5.1.根据r ...

  10. C++面向对象程序设计期末复习笔记[吉林大学](结合历年题速成85)

    1.头文件 头文件的作用就是被其他的.cpp包含进去的.它们本身并不参与编译,但实际上,它们的内容却在多个.cpp文件中得到了编译.根据"定义只能一次"原则我们知道,头文件中不能放 ...