<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. 初识java java的加载与执行(JDK,JVM,JRE关系解释)

    首先java代码是以 .java结尾的文件,通过javac命令编译生成.class编译生成字节码文件,再通过java命令,把字节码文件加载到内存内部,此时是类加载器ClassLoader执行加载,通过 ...

  2. python实战问题记录

    开发环境搭建 1.安装aiohttp这个异步的http框架失败 提示使用pip更高版本,但是更新之后,还是无法使用.所以,我们采用anaconda中的aiohttp,即打开anaconda,然后进入E ...

  3. C#：使用ListView动态添加数据一直闪烁的解决办法

    首先,自定义一个类ListViewNF,继承自 System.Windows.Forms.ListView using System; using System.Collections.Generic ...

  4. C#:多线程、线程同步与死锁

    推荐阅读: C#线程系列讲座(1):BeginInvoke和EndInvoke方法 C#线程系列讲座(2):Thread类的应用 C#线程系列讲座(3):线程池和文件下载服务器 C#线程系列讲座(4) ...

  5. list、vector、deque互相拷贝

    #include <iostream> #include <stdlib.h> #include <string.h> #include <algorithm ...

  6. dockerfile简述

    作用 Dockerfile的内容是一坨可以执行的代码(或者说是指令)(docker的DSL),这些代码使得创建镜像的操作可以复用以及自动化. 指令格式 Dockerfile的指令格式很简单: INST ...

  7. win10 关闭屏幕自动亮度

    每次切换到vsCode,再切换回桌面,屏幕总是忽暗忽亮,这谁设计的,脑残至极! 百度了好久,终于找到解决办法: 控制面板→英特尔®核芯显卡→电源→使用电池→显示器节能技术→禁用→应用 如果你按上述步骤 ...

  8. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  9. asp.net调用js方法

    C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> fu ...

  10. win2003 远程连接限制

    1.单击开始->运行,输入gpedit.msc,打开组策略编辑器,找到计算机配置 ->管理模版 -> Windows组件 ->终端服务.把限制连接数量的属性修改成我们需要的数字 ...