解决在DIV中文字自动下排的问题

最新推荐文章于 2021-12-13 14:30:39 发布
最新推荐文章于 2021-12-13 14:30:39 发布
阅读量321 收藏
点赞数
分类专栏： WEB前端 文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/highflys/article/details/84295546
版权

1.对于一个DIV 或者表格TD 宽度是已经定义
想让里面的文字让自动下排，我们用样式进行控制就可以了
如下示例代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.valign{ width:12px; height:120px; word-spacing:normal; world-break:keep-all;}
</style>
</head>

<body>

<div class="valign">我爱你中国</div>


</body>
</html>

 

孤长风
关注
专栏目录
html字段两边顶格换行,HTML DIV中文字自动换行 , 顶部对齐
weixin_32824725的博客
05-30 1336
demo.box {position: relative;width: 500px;height: 300px;border: 1px solid #FFF;background-color: #999;display: table;}.wrap{display: table-cell;vertical-align: middle;*position:absolute;*top: 50%;*lef...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
weixin_33374585的博客
05-30 4988
原标题：HTML5+CSS3实现图片的放大/缩小 最近做项目时，经常遇到需要图片缓慢放大的效果。我做的时候想到了几种方法，所以来总结一下。1、 利用css改变图片的宽高，做出视觉上的放大。首先，将图片写入html页面中，给定宽高。 箭头所指向的就是我们需要变化的图片。我们需要给定图片父级盒子的宽高，如上图。Tips:transition用于设置四个过渡属性。这四个属性分别为： 这个属性要设置在做动...
【前端1】对于div中文字内容的上下
小屋
03-22 2006
最近由于工作需要开始学习前端的东西了，从头开始看HTML、CSS、JavaScript，觉得学习前端需要细心，慢慢的现在有点感觉了。继续加油啊，只有静下心来去做，肯定能快速掌握大前端的。 1，div中的文字内容的移动需要position:relative;与left，top等方向配合使用。 .context{ /*需要 position: relative;与left: 23px;to
在inline-block的div中添加p元素导致下移
hello world
02-25 873
根据这篇文章css中inline-block出现下移的情况 - 青竹玉简 - 博客园，知道： 查阅了相关资料发现，在将元素display设置为inline-block的时候，元素即同时具有内联元素和块级元素的属性，既排列在同一行又可以设置宽高。 对于内联元素，都具有vertical-align属性，那这里就牵涉到vertical-align的默认对齐方式。 它的默认方式是baseline，基线对齐。基线指内容的下边缘 第一个div里有元素，基线为元素也就是p元素的下边缘，第二个div内..
css盒子模型_css盒子模型深入了解
weixin_39604516的博客
11-29 160
行高：line-height行高是文字基线到基线的距离一行文字的行高当年等于父元素的高度时，文字垂直居中显示当一个盒子没有设置高度时，里面要有内容，可以用行高撑开盒子浏览器默认的字体大小是16px如果子元素没有设置行高当行高数值由em、%为单位是，子元素的行高是继承父元素的行高乘字体大小的结果当行高数值是px为单位时，子元素直接继承父元素的行高当行高无单位直接是数值的时候，子元素行高是子元素的文字...
使用很多div标签真的不好吗？
10-28 310
我们的最新著作- 一个具有争议的标题 -已造成比在一个谷仓舞青蛙的桶中很多争论，更下意识的反应。 我见过频繁发布的评论是，“替换table与标签div s表示显示为表是没有什么不同; 你可能也只是使用表“。 因为它听起来就像是评论者暗示不使用的唯一原因说法很有趣table标签是涉及标签的数量。 我要坚持我的脖子，说，是的，即使你只是更换所有的table ， tr和td与标签div标签，像这些表...
解决给div中添加文字后位置发生偏移的问题
小夜丶凝眸的博客
09-12 1万+
问题描述：   文字信息是通过jQuery动态添加的，为了容易看清该div的位置，暂时先将背景颜色设置为黑色。    position:relative;left:350px;top:5px;"> 加入文字之后的效果图如下： 可以看到本来应该在黑色div中显示的文字信息却跑到了div下面的位置。 通过调试发现造成这种问题的原因是因为给该div设置了相对定位(;positi
div中英文无法自动换行的解决办法
12-11
那么，难道我们得在每个字母中间加入一个空格来解决这个问题么？其实不用的，可以通过CSS实现。 解决办法：在div的style中设定word-break:break-all;即可实现自动换行。添加后的div代码大致如下 div中英文自动换行...
DIV设置了固定宽高出现文字(文本)的不能自动换行
09-25
针对英文文本在固定宽度DIV中无法自动换行的问题，有以下几种解决方法： 1. 在文本适当位置手动加空格：对于开发者来说，如果提前知道文本中可能会包含过长的单词，可以在单词适当的位置手动添加空格。这样浏览器在...
聊天室html页面提交内容后div内容自动滚到底部
fwjyttbtx的专栏
03-11 2643
在js中让div的内容自动滚向底部需要将做的就是将div的scrollTop指向div的scrollHeight 代码如下 提交 function tijiao(){ var scrollDiv = document.getElementById('demo'); scrollDiv.scrollTop = scrollDiv.scrollHeight; } jqu
多个div一行显示，超出的自动排列到下一行
weixin_40841731的博客
07-02 1万+
<div style="width: 600px;"> <div style="display: inline-block;width: 100px;margin-left: 17px;margin-top: 10px""> <img style="width: 100%;height: 100%; :src="billImg.orderImg"...
“设置display:block-inline的li或div中添加文字后，导致li或div排版掉落、错位”的原因及解决方法
titoni_yunruohan的博客
11-25 4029
 情景    在了解可以通过设置display：inline-block会将块级元素拥有inline元素一行排列的特性，那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列，这时候你可能说通过设置浮动float就可以解决，不着急，float的原理和实现作为补充内容会接着聊，那么接下来先通过效果图来看一下问题所在 代码展示（通过设置display将li...
文字居于div底部的方式
六耳石猴的博客
12-13 1万+
CSS中的text-align属性只能控制文字在水平方向的左对齐（left），右对齐（right），居中（center）,控制不了垂直方向的文字位置，对此有以下解决方案 在div内部塞占位符标签，把文字挤到下方(不推荐) <div class="div"> <div class="place"></div> 我是祖父: 下面是爸爸 </div> <style> .div { height: 100px; } .pl
css的属性使字体上下排列
liukai6的博客
05-15 5957
我们使用这种属性 span { writing-mode: tb-rl; } 这样就可以使字体上下排列
DIV中的span内部文字排版掉落、错位的原因及解决方法
qq_41590119的博客
06-29 2886
今天是第一次写博客，我也是今年刚毕业，目前是webgis开发岗位。写一下博客也是想记录一下踩过的坑 顺便分享给有需要的小伙伴们。 今天做项目，需求是修复一下主页鼠标移动中，左下方坐标栏文字消失的bug HTML和CSS:代码如下 正常情况是这样的 但是当我把鼠标移动到屏幕边框处的时候 下面的固定面板神奇地消失了。 于是乎我在网上找了各种办法，发现并不是函数逻辑的错误，而是display这个属性从中作梗。网上各种说法：诸如 inline-blo...
怎样使div中的文字在div的底部显示？
热门推荐
大前端
06-04 1万+
如果你的div的高度是100px;那么你应该把行高设置成170左右（大约是div高度的二倍，具体的可以调，决定行高的主要原因是字体的大小），如果仅仅是这样的话，那么在IE6下就会出现div高度加倍的现象，解决的方法是在div的css样式里面加上overflow:hidden; 举个例子： html代码：      fsdfsdf css代码： .one{ he
‘html内容盒子缩小页面时被挤到下面了’的解决方法
m0_49315169的博客
04-21 7283
‘html内容盒子缩小页面时被挤到下面了’的解决方法 1.问题描述 在编写页面的时候，有时会出现页面挤到另一行的情况。 这里我们可以做一个示例，定义两个盒子让他们都左浮动。 如下所示： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> *{ margin: 0;
解决CSS+Div在IE浏览器中的兼容问题
"关于CSS+Div在IE中的兼容性问题及解决方法" 在Web开发中，CSS（层叠样式表）和Div元素是构建现代网页布局的基础。然而，由于不同的浏览器，尤其是Internet Explorer（IE）的不同版本对CSS的支持程度不一，这给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值