关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

一.问题产生的原因

  当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字

的时候才会出现这种情况为此我特意测试了两种情况,结果如下:

  ①当文本内容为纯数字或者字母:

  ②当文本内容为汉字:

    所以我们可以得出结论:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。

二.解决方法

  ①word-wrap:break-word     (例如div宽200px,它的内容就会到200px自动换行)

  ②word-break:break-all        (相比较于上面的方法,这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词,它会保留一个完整的单词自动换行)

  下面让我们来测试一下

  这样我们就可以看见字母自动换行了!!!

原文地址:https://www.cnblogs.com/ygxdbmx/p/9380089.html

时间: 2024-10-23 14:02:40

关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法的相关文章

UIView 设置alpha后, 子view也随着变化alpha, 解决方法

//        _closeContainerBar.alpha = 0.7; [_closeContainerBar setBackgroundColor:[[UIColor blackColor] colorWithAlphaComponent:0.7]]; UIView 设置alpha后, 子view也随着变化alpha, 解决方法

asp.Net2.0中TextBox设置只读后后台获取不到值的解决方法

http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html ASP.NET中TextBox控件设置ReadOnly="true"H或Enabled=false后台取不到值 当TextBox设置了ReadOnly="true" 后,要是在前台为控件添加了值,后台是取不到的,值为“空”  . 方法一:不设置ReadOnly属性,通过onfocus=this.blur()来模拟,如下: <asp:Text

html中div标签的使用方法

 CSS是DHTML的基础,CSS用于设定HTML元素在页面上的显示风格,而CSS-P则是CSS的一个扩展,它可用来控制HTML元素在网页上或者说在窗口的位置.下面的两个链接提供了CSS和CSS-P详尽的技术手册: W3C CSS-Positioning Builder.com's CSS Guide 在本课程中,将会反复地对CSS进行介绍. 使用DIV标签 使用CSS-P,主要依靠< div >标签来实现,当你把HTML内容放在< div >标签里时,可以称它为:"

进行手持设备wince开发中DataGrid的样式设置(宽度)

private void SelectGoodsForm_Load(object sender, EventArgs e) { //定义 DataGrid样式 DataGridTableStyle dataGridStyle = null; dataGridStyle = new DataGridTableStyle(); this.goodsGrid.DataSource = createDataTable(); //清楚之前的DataGrid样式 this.goodsGrid.TableSt

让DIV标签中的P标签水平和垂直都居中

http://blog.csdn.net/yaoyyl/article/details/50548589 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>让DIV标签中的P标签水平和垂直都居中</title> <style type="text/css"> div { width:400px; height:

html中a标签中的onclick和href的使用

下面代码则执行了subgo()函数, <a href="javascript:void(0)" onclick="subgo()">点我</a> 在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo(). <a href="#" onclick="subgo()">点我</a>与<a href="javascr

iOS开发中Can&#39;t find keyplane that supports type 5 for keyboard iPhone-Portrait-PhonePad的解决方法

刚才发现的问题,我在开发的过程中会出这种提示Can't find keyplane that supports type 5 for keyboard iPhone-Portrait-PhoneP,把我吓一跳,我立马找度娘翻译了一下,大概意思是找不到支持键盘iPhone画像keyplane phonep 5型,我也不知道这是什么问题,于是我继续虐度娘,终于找到了一点. 意思是Xcode 6有小bug,只要设置一下就没问题了,设置的如下图: 点击模拟器上面的菜单:Hardware->Keyboar

MVC自我学起之MVCMusic开发中遇到问题:musicstore edit方法出错的原因和解决方法

错误提示: 存储区更新.插入或删除语句影响到了意外的行数(0).实体在加载后可能被修改或删除.刷新 ObjectStateManager 项. 解决案: 1.在view中或model中增加隐藏id 1.1 修改model [HiddenInput()]public int AlbumId { get; set; } 1.2在视图中增加:(一般 若是用自动新建的curd中会自带) 加@Html.HiddenFor(model => model.AlbumId) 2.得到id也有两种方法一种是修改m

VS2010中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法

原文:VS2010中,无法嵌入互操作类型"--",请改用适用的接口的解决方法 1.提示:在VS2010,在引用COM组件的时候,出现了无法嵌入互操作类型"--",请改用适用的接口的错误提示. 2.解决方案: 选中项目中引入的dll,鼠标右键,选择属性,把"嵌入互操作类型"设置为False. 例如: MSXML2.XMLHTTP _xmlhttp = new MSXML2.XMLHTTPClass(); 提示无法嵌入互操作类型MSXML2.XMLH