<span>加上display:inline-block，成功实现了想要的效果。
但又有一个问题，纯连续字母和数字不会换行，最后加上word-wrap: break-word强制自动换行搞定。

word-break: break-all会当文本达到宽度就强制换行，而不管单词有没有完整显示，不推荐使用。比如consulate只显示cons就截断了。而word-wrap: break-word会把consulate直接换到下一行显示

span元素文字自动换行的更多相关文章

  1. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  2. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  3. css中span元素的width属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  4. div和span元素的区别

    2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行. DIV 和 SPAN 元素最大的特点是默认都没有对元素内的 ...

  5. HTML DIV中文字自动换行 , 顶部对齐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  6. 如何改变span元素的宽度与高度

    内联元素:也称为行内元素,当多个行内元素连续排列时,他们会显示在一行里面. 内联元素的特性:本身是无法设置宽度和高度属性的,但是可以通过CSS样式来控制,达到我们想要的宽度和高度. span举例1: ...

  7. span 元素无法设置宽度问题

    span 元素为行内元素,没有width属性,需要转换为块级元素才可以设置width: 拓展:html元素分为块级元素,行内元素.可变元素. 行内元素与块级元素直观上的区别 1 .行内元素会在一条直线 ...

  8. canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  9. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

随机推荐

  1. SpringMVC初探-HelloWorld

    MVC的概念 MVC是一种设计模式,即Model--View-Controller,模型--视图--控制器 Model(模型)表示应用程序核心(比如数据库记录列表). View(视图)显示数据(数据库 ...

  2. POJ 2545

    #include<iostream> #include<stdio.h> #include<iomanip> #define MAXN 100000 using n ...

  3. Vue2.5开发去哪儿网App 第二章笔记

    Vue完成  TodoList 1.默认方式 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. postgresql的启停和创建

    一.启停方法 两种方法 1.直接运行postgres进程启动: 2.使用pg_ctl命令启动 postgres -D /home/osdba/pgdata  & 二.停止数据库的三种模式 sm ...

  5. java开发细节问题，spring的单例模式，多线程同步问题

    1.对象的赋值,new一个对象,然后在传递给函数赋值,往往这对对象赋值就可以使用了 2.对于 spring开发的细节问题 Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这 ...

  6. Windows x86 下的 静态代码混淆

    0x00  前言 静态反汇编之王,毫无疑问就是Ida pro,大大降低了反汇编工作的门槛,尤其是出色的“F5插件”Hex-Rays可以将汇编代码还原成类似于C语言的伪代码,大大提高了可读性.但个人觉得 ...

  7. 【杂谈】Java I/O的底层实现

    前言 Java I/O功能封装的很好,使用起来很方便,就是刚开始学的时候,如果不了解装饰器模式,会被他繁多的类给吓到.用多了也就习惯了,而且现在有很多实用的封装良好的实用类,可直接读写整个文件.开发者 ...

  8. git第二节----git clone与git tag

    @git 远程克隆(clone)仓库,将远程工程clone到本地仓库:默认克隆远程master 分支 git clone  https://github.com/kaokaozhu/Test.git ...

  9. SpringMVC源码阅读系列汇总

    1.前言 1.1 导入 SpringMVC是基于Servlet和Spring框架设计的Web框架,做JavaWeb的同学应该都知道 本文基于Spring4.3.7源码分析,(不要被图片欺骗了,手动滑稽 ...

  10. SpringMVC之使用 @RequestMapping 映射请求

    @RequestMapping注解 SpringMVC使用该注解让控制器知道可以处理哪些请求路径的,除了可以修饰方法,还可以修饰在类上. – 类定义处:提供初步的请求映射信息.相对于 WEB 应用的根 ...