<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. Django模版语言自定义标签-实现前端 关联组合过滤查询

    前端关联 组合过滤查询 实现效果如图: models.py 创建表代码 from django.db import models # Create your models here. class Le ...

  2. MVC3学习：利用mvc3+ajax结合MVCPager实现分页

    本例使用表格Users(Uid,UserName,PassWord),数据库访问使用EF first code. public class Users { [Key] public int Uid { ...

  3. 解决Redisson出现Failed to instantiate [org.redisson.api.RedissonClient]: Factory method 'create' threw exception; nested exception is java.lang.ArrayIndexOutOfBoundsException: 0的问题

    一.背景 最近项目中使用了redisson的哨兵模式来作为redis操作的客户端,然后一个意外出现了,启动报:Failed to instantiate [org.redisson.api.Redis ...

  4. Linux系统基础知识整理

    一.说明 本篇文章,我将结合自己的实践以及简介,来对linux系统做一个直观清晰的介绍,使得哪些刚接触Linux的小伙伴可以快速入门,也方便自己以后进行复习查阅. 二.基本知识整理 1.Linux文件 ...

  5. Java中函数的重载和重写

    重载 重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况.比如下面这段代码 class Test{ public void a(){ System.out.println ...

  6. 复刻smartbits的国产网络测试工具minismb-如何测试DPI引擎

    复刻smartbits的网络性能测试工具MiniSMB,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太网测试工具测试任何ip网络设备的端口吞吐率,带宽,并发 ...

  7. 基于Ip的刷投票排名及刷百度推广的自动化实现

    所有基于Ip的刷投票排名,只要不涉及用户登录情况,都可以在手机端自动化实现,因为电信运营商的ip地址段是无限的,理论上,飞行模式开关一次,所分配ip地址是变化的,这就有了大量的ip可用 在手机端写个a ...

  8. java 操作 RabbitMQ 发送、接受消息

    例子1 Producer.java import java.io.IOException; import java.util.concurrent.TimeoutException; import c ...

  9. IIS 共享目录读写报错 Access to the path：“\\192.168.0.1\1.txt”is denied解决方案

    这个是IIS权限的问题,主要修改了以下地方,如果两台电脑有相同的用户名和密码可以跳过第一步 1.找到共享目录的文件夹,属性=>共享,给电脑创建一个新用户,共享文件下添加新用户的读写权限,然后对应 ...

  10. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...