<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. Android MediaPlayer setDataSource failed

    今天在尝试使用MediaPlayer播放音乐时出了一个问题,在使用 mp.setDataSource(this,Uri.parse("/sdcard/Music/adele.mp3" ...

  2. python 信号量，Event， 定时器

    信号量 信号量也是一把锁,可以指定信号量为5,对比互斥锁同一时间只能有一个任务抢到锁去执行,信号量同一时间可以有5个任务拿到锁去执行. 如果说互斥锁是合租房屋的人去抢一个厕所,那么信号量就相当于一群路 ...

  3. 打印页面时a标签不显示URL的方法

    以前写博客啊,总想写一篇大作,然后希望能挂到博客园首页,隔一会儿看看阅读量有多少.其实哪有那么多大作,大部分时间都是解决了一个小问题,然后需要记录一下.比如下面这篇. 今天遇到一个需求是,打印网页时, ...

  4. Android四大组件之---activity生命周期详解

    废话不多说, 先来一张Google提供的一张经典的生命周期流程图: 有的朋友可能看英文的有点费劲,再提供一张中文版的  O(∩_∩)O 相信已经很多人对这张图再熟悉不过了,下面笔者按照自己的理解并结合 ...

  5. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  6. 高可用Hadoop平台－运行MapReduce程序

    1.概述 最近有同学反应,如何在配置了HA的Hadoop平台运行MapReduce程序呢?对于刚步入Hadoop行业的同学,这个疑问却是会存在,其实仔细想想,如果你之前的语言功底不错的,应该会想到自动 ...

  7. [Python 从入门到放弃] 2. 列表的其它操作

    1. 列表可以混合不同类型的数据项 movies=['<黄飞鸿之英雄有梦>','<寒战2>','<乘风破浪>'] 在这句代码中,数据项为电影名称,现在这个列表用来保 ...

  8. 如何查找SHELL的进程号并杀死

    一.shell查找进程并杀死 #!/bin/sh tomcat_id=`ps -ef | grep tomcat | grep -v "grep" | awk '{print $2 ...

  9. lucene 初探

    前言: window文件管理右上角, 有个搜索功能, 可以根据文件名进行搜索. 那如果从文件名上判断不出内容, 我岂不是要一个一个的打开文件, 查看文件的内容, 去判断是否是我要的文件? 几个, 十几 ...

  10. MVC源码分析 - Action/Result 过滤器(续)

    上一篇 看到了Action/Result过滤器的执行顺序: OnActionExecuting -> Action -> OnActionExecuted -> OnResultEx ...