前言:发现以前写的就像是笔记,哪像博客啊,这里再次修改。

问题描述: 在固定宽度的p元素里(任何块级元素同理),长单词不自动换行,中文字符会自动换行,效果如:http://codepen.io/aliceluojuan/pen/rrxbpO

产生原因:1.英文会将不包含空格、换行的连续文本认为是一个词,所以在默认情况下不换行;

     2.中文的话标点文字都是独立的,所以会自动换行;

解决方案:

在英文字不改变内容的情况下,通过设置p元素的

p{

    word-wrap:break-word
/*或者是下面一种方法让单词强制换行*/
/*
word-break: break-all;
*/
}

也可以强制将单词换行,demo;

但是word-wrap和word-break的区别是什么呢?

请看这篇文章咯,讲得很详细http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html;我也验证过哟!

p标签不自动换行原因的更多相关文章

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

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

  2. 【HTML】让<pre>标签文本自动换行

    利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...

  3. 导航栏下a标签失效的原因

    前天我一直没找到失效的结果,就在刚才,我用不同的浏览器打开我编写的网页,有一个浏览器的图片循环播放效果错位了,我觉得就是它上边的div把他挤下来了.正如前天网上看到的高手的们的说法.我用firebug ...

  4. 自定义View(四) ViewGroup 动态添加变长Tag标签 支持自动换行

    欲实现如下效果: 思路很简单就2步: 1.测量出ViewGroup的大小 2.找出子View的位置 若要实现动态添加标签view,就要实现ViewGroup的onMeasure().onLayout( ...

  5. Android 自定义View修炼-Android中常见的热门标签的流式布局的实现

    一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...

  6. HTML -- 标签记录(随着学习不断更新)

    此篇博文主要记录一些标签的常用属性 Font标签 size:字体大小 color:颜色 face:字体 <!DOCTYPE html> <html> <head> ...

  7. IOS动态自适应标签实现

    先上效果图 设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是 ...

  8. JSTL标签库的基本教程之核心标签库(一)

    JSTL介绍 Java Server Pages Standard Tag Libray(JSTL):JSP标准标签库,它封装了JSP应用的通用核心功能.JSTL支持通用的.结构化的任务,比如迭代,条 ...

  9. HTML的各种基本标签

      一 .head中的各种标签                1.       <!DOCTYPE html><html>文档类型声明   声明当前文件是一个HTML5文件文档 ...

随机推荐

  1. c# 异步和同步问题(转载)

    [C#] 谈谈异步编程async await   为什么需要异步,异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过 ...

  2. MVP 模式简单易懂的介绍方式

    为什么用Android MVP 设计模式? 当项目越来越庞大.复杂,参与的研发人员越来越多的时候,MVP 模式 的优势就充分显示出来了. MVP 模式是 MVC 模式在 Android 上的一种变体, ...

  3. Android Service不能再详细的教程

    这篇包含了: Service后台服务.前台服务.IntentService.跨进程服务.无障碍服务.系统服务 几乎所有Android Service相关的东西. 前言 作为四大组件之一的Service ...

  4. 【转】用JS完成手机短信验证按键点击事件

    原地址:https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571 试了一下,效果还可以,留着备用! <!DOCTYPE html&g ...

  5. Pig脚本 .pig

    pig脚本就是一个文件,保存了多条pig命令,通常后缀是.pig(不强制).       多行注释:/**/     单行注释:--       下面是一个名字是test.pig的脚本的例子: /* ...

  6. 一个Interface 继承多个Interface 的总结

    我们知道在Java中的继承都是单继承的,就是说一个父类可以被多个子类继承但是一个子类只能有一个父类.但是一个接口可以被不同实现类去实现,这就是我们说的Java中的多态的概念.下面我们再来说一下接口的多 ...

  7. Oracle EBS 取总账期间

    --取期间 select GPS.EFFECTIVE_PERIOD_NUM, GPS.PERIOD_NAME from GL_PERIOD_STATUSES GPS AND (GPS.SET_OF_B ...

  8. Vue2学习笔记:html属性

    1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  9. 使用UICollectionView

    使用UICollectionView 使用UICollectionView的流程: 1. 设定一个UICollectionViewFlowLayout 2. 使用这个设定的UICollectionVi ...

  10. windows下搭建vue开发环境

    Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.2016 ...