前端 阿拉伯数字不换行

2023-11-03

对于一般的div 自要设置了width; 如果容器里面的文字过多,则文章就会自动换行,

但是如果输入连续的英文字符,则设置的width 不会生效,容器会被撑开。

比如:

一般div超过宽度能换行,对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。

对于连续的英文字符和阿拉伯数字不能换行, 原因如下:

这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行。 

解决方法(以IE,chrome,FF为测试浏览器):

{

  word-break:break-all; /*支持IE,chrome,FF不支持*/

  word-wrap:break-word;/*支持IE,chrome,FF*/

}

 

以下是对这两种方法的区别说明:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3,word-break:break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

   word-wrap:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。


语法:word-break : normal | break-all | keep-all

参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

   break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

   keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本


语法: word-wrap : normal | break-word

参数: normal : 允许内容顶开指定的容器边界

    break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端 阿拉伯数字不换行 的相关文章

  • 在选择下拉列表中选择特定选项时添加输入框

    我需要在选择选项时将输入添加到选择选项中 每当用户选择 其他 时 就会出现一个输入框供用户输入数据 HTML
  • 列表项的替代背景颜色

    我有一个列表 每个项目都是链接的 有没有办法可以替换每个项目的背景颜色 ul li a href link Link 1 a li li a href link Link 2 a li li a href link Link 3 a li
  • ActiveX 日历控件在 Windows 7 中不起作用

    我们有一个经典的 ASP 应用程序 它使用以下日历对象
  • 如何实现 chromecast 对 html5 播放器的支持

    我使用js和html5设计了一个具有一些自定义功能的html5播放器 现在我需要在html5播放器上添加chromecast选项 例如https raw githubusercontent com kim company videojs c
  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • iPad 上的网站纵向视图

    我的网站在 iPad 纵向模式下无法正确显示 它在横向模式下看起来不错 但当我将其转换为纵向模式时 我最终会得到一个混乱的网站 所有元素都分散在整个网站上 我怎样才能解决这个问题 请帮我 这是我网站的链接 inclouds co uk ht
  • Google 字体(上面有空格)无法在 IE7/IE8 上呈现

    有谁知道为什么 IE7 IE8 不会渲染 Google 字体 如果名称上有空格 您可以在这里查看演示 http jsfiddle net fYzAb 1 http jsfiddle net fYzAb 1 完全相同的两个标签 一个使用 Os
  • Shift+Enter 按钮用于提交表单

    我想使用 Shift Enter 按钮提交表单 而不是简单地按 Enter 按钮 请帮助我 如果您仍然想这样做 尽管这会带来可用性问题 form keydown function e if e keyCode 13 e shiftKey W
  • Firefox 中出现图像映射问题

    我的图像地图无法在 Firefox 中运行 但可以在 Chrome 和 Safari 中运行 我认为这与 div 内的一些标签有关 你们能帮帮我吗 因为我对此不太了解 div style font size 14px img src dat
  • 如何通过 HTML 表单创建 google 图片搜索的链接?

    尝试使用 HTML 表单制作 Google 图像搜索克隆 在搜索字段中输入文本后 它将直接带您进入 Google 图像搜索结果页面 这是我正在使用的代码
  • HTML Canvas:旋转图像 3D 效果

    我怎样才能旋转图像 例如45度 并挤压图像 假设我有一个完美的方形图像 我可以将它旋转到我想要的任何角度 但我想让旋转后的正方形被压扁 使高度比宽度小 2 3 生成的图像将不是一个完美的旋转正方形 而是一个被压扁的正方形 你知道我怎样才能达
  • IE7内容可编辑自动换行

    我有以下代码 div class editable This is test text This is test text This is test text This is test text This is test text Thih
  • 尝试为每一行编写测试用例

    已经编写了跳跃方法的测试用例 但当我看到代码覆盖率报告时 它不会进入onloadend方法seat onloadend 在 createSpyObj 中我调用了 loadend 但它仍然没有进入内部 你们能告诉我如何解决它吗 下面提供我的代
  • 带有 HTML 的 UIActivityViewController

    当我将包含 HTML 内容的字符串作为数组元素传递给UIActivityViewController initWithActivityItems方法中 它不会在选定的 共享 控制器中将其呈现为 HTML 而是呈现 HTML 源 即标记而不是
  • HTML5 网站在手机屏幕关闭时运行?

    基本上 我的问题与这个话题 https stackoverflow com questions 15465242 html5 mobile app running while phone screen is off但现在已经是 2018 年
  • 如何知道 Solr Optimize 何时完成?

    我正在使用 Solr php client 通过 php 与 Solr 进行通信 这段代码触发solr优化命令 solr gt optimize 请问有没有什么方法可以确定优化完成了 这都是因为我的网站上有一个管理页面 我每天必须手动优化
  • HTML5 画布在缩放和旋转后平移

    我正在尝试用画布做一些事情 首先 我让用户上传图像 如果图像比我想要的大 我需要将其缩小 那部分工作得很好 最近我们遇到了 iPhone 用户上传图像的问题 这些都存在方向问题 我已经弄清楚如何提取方向 我的问题是当我操纵画布中的图像时会发
  • 容器中的等间距 div

    这是我的例子 http jsfiddle net rtCP3 62 http jsfiddle net rtCP3 62 我有 3 个 或更多 div 我想在一个容器中均匀分布 当将 Angular 与 ng repeat 一起使用时 样式
  • JavaScript - 替换 html 字符串中的特定单词索引

    我在 JS 字符串操作方面面临着一项具有挑战性的任务 有一个 HTML 字符串 我需要在其中替换特定单词索引处的单词 单词索引是忽略 HTML 标签时单词的编号 例如 下面是 HTML 字符串 span style font family
  • 使用 JavaScript 和 HTML 打印表情符号

    为什么这有效 p x1f604 p 而这并没有 document getElementById emoji innerHTML String fromCharCode parseInt 1f604 16 JS 术语中的 char 实际上是一

随机推荐

  • linux部署java项目

    这本阿里P8撰写的算法笔记 再次推荐给大家 身边不少朋友学完这本书最后加入大厂 Github 疯传 史上最强悍 阿里大佬 LeetCode刷题手册 开放下载了 linux部署java项目步骤 一 部署jdk 1 下载jdk 官网下载比较慢
  • 毕业设计-基于大数据的电影爬取与可视化分析系统-python

    目录 前言 课题背景和意义 实现技术思路 实现效果图样例 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个学校要求的毕设项目越来越难 有不少课题是研究生级别难度
  • apache beam_如何使用apache beam pub sub和sql为在线商店建立实时数据管道

    apache beam It is fascinating to see how malleable our data is becoming Nowadays we have tools to convert highly nested
  • 西瓜书_学习任务_更新至9.5号

    任务1 西瓜书3 1 3 2 3 3 章节学习 描述对数几率回归算法的过程 任务2 详细解释逻辑回归模型中每个超参的意义 任务3 西瓜书3 3节的扩展内容 softmax回归和3 6节学习 任务4 理解sklearn包中LogisticRe
  • Apache JMeter 5.5 下载安装以及设置中文教程

    Apache JMeter 5 5 下载安装以及设置中文教程 JMeter 下载Apache JMeter 5 5 配置环境变量 查看配置JDK 配置JMeter环境变量 运行JMeter 配置中文版 一次性 永久设置正文 JMeter 下
  • Qt 读写xxx.ini配置文件

    1 配置文件 ini 请注意 我们所讨论的是项目中的配置文件 它是整个项目共用的 所以它要有一个项目使用的文件名 其后缀是 ini 例如 端口配置 ini ini文件格式 INI文件由节 键 值组成 节 section 参数 键 值 nam
  • 卷积神经网络手写体识别

    CNN 背景 卷积 LeNet网络结构 C1 S2 C3 S4 C5 F6 输出 数据集 代码及运行结果 测试 CNN 1995年 Yann LeCun 与Yoshua Bengio 提出了convolutional neural netw
  • 编程每日一题_C程序设计_i++ 与 ++i

    描述 区分 i 与 i 之间差异 代码示例1 include
  • Leetcode1402.做菜顺序——逆序贪心

    文章目录 引入 题解 引入 在本周的双周赛中 有了这么一道题 一个厨师收集了他 n 道菜的满意程度 satisfaction 这个厨师做出每道菜的时间都是 1 单位时间 一道菜的 喜爱时间 系数定义为烹饪这道菜以及之前每道菜所花费的时间乘以
  • javascript 判读字符串是否为数字

    javascript在通过parseIn或parseFloat将字符串转化为数字的过程中 如果字符串中包含有非数字 那么将会返回NaN 参考下面代码 parseInt Hello 10 return NAN parseInt 110 10
  • 算法模型部署- Docker

    一 什么是docker Docker是一个虚拟环境容器 可以将你本地开发开发环境 代码 配置文件等一并打包到一个容器中 然后发布到任意平台 部署到你想部署到的任意服务器中 二 模型部署为什么要使用docker 假设将本地项目部署到服务器中
  • mysql-字段设置Default值问题

    1 表中的shState字段设置了默认值0 可是新增的时候没有起作用 可能是因为Not Null没有打勾引起的 2 勾选后还是不行 新增报错 3 百度了下 原来是要设置int这种数值类型才会起作用 字符型不行 4 所以改成int类型 测试O
  • 机器学习——支持向量机学习

    支持向量机 Support Vector Machine SVM 不仅具有坚实的统计学理论基础 还可以很好地应用于高维数据 避免维度灾难问题 已经成为一种倍受关注的机器学习分类技术 为了解释SVM的基本思想 我们首先介绍一下最大边缘超平面
  • mysql的判断更新_mysql判断记录是否存在,存在则更新,不存在则插入

    向数据库插入记录时 有时会有这种需求 当符合某种条件的数据存在时 去修改它 不存在时 则新增 也就是saveOrUpdate操作 这种控制可以放在业务层 也可以放在数据库层 大多数数据库都支持这种需求 如Oracle的merge语句 再如本
  • 戴尔服务器调节风扇转速

    开机F10进入 Lifecycle 选择系统设置 高级硬件设置 选择iDARC设置 散热 散热选择最大性能 其余按需选择 点击 返回 完成 保存更改 一路点完成 然后重启
  • 时序预测

    时序预测 MATLAB实现IWOA BiLSTM和BiLSTM时间序列预测 改进的鲸鱼算法优化双向长短期记忆神经网络 目录 时序预测 MATLAB实现IWOA BiLSTM和BiLSTM时间序列预测 改进的鲸鱼算法优化双向长短期记忆神经网络
  • Go语言面试题--进阶提升(6)

    文章目录 1 下面的代码输出什么 2 下面的代码输出什么 3 下面的代码输出什么 4 下面的代码输出什么 5 下面代码有什么问题吗 6 下面代码输出什么 请说明 1 下面的代码输出什么 type T struct n int func ma
  • Android设备的序列号与ro.serialno

    Android设备的序列号是通过获取Property ro serialno 的值取得的 ro serialno 的值一般来源于内核启动参数中的 ro boot serialno 在rk3368 Android6 0中 uboot读取idb
  • 微信小程序项目刚建好编译就报错

    出现的错误如下 1 Cannot delete property WeixinJSBridge 2 Argument 0 must be a buffer source or a WebAssembly Module object 出现这个
  • 前端 阿拉伯数字不换行

    对于一般的div 自要设置了width 如果容器里面的文字过多 则文章就会自动换行 但是如果输入连续的英文字符 则设置的width 不会生效 容器会被撑开 比如 一般div超过宽度能换行 对于div p等块级元素 正常文字的换行 亚洲文字和