自动换行并垂直居中

最新推荐文章于 2023-01-04 00:19:17 发布
最新推荐文章于 2023-01-04 00:19:17 发布
阅读量1.1k 收藏
点赞数
<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8" />    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
        <title>demo</title>    
        <style type="text/css">    
            .box {    
                width: 500px;    
                height: 300px;    
                border: 1px solid #FFF;    
                background-color: #999;    
                display: table;    
            }    
            .wrap{    
                display: table-cell;    
                vertical-align: middle;     
            }          
                
        </style>    
    </head>    
    <body>    
    
        <div class="box">    
            <div class="wrap">  
                       我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行固定宽度的文字自动换行并垂直剧中固定宽度的文字自动换行并垂直剧中   
                我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行固定宽度的文字自动换行并垂直剧中固定宽度的文字自动换行并垂直剧中   
            </div>    
        </div>      
    </body>    
</html>  
Rain_Qiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
03-22
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
文字垂直居中且自动换行
weixin_30449453的博客
02-15 309
<!DOCTYPE html> <html> <head> 　　<meta charset="utf-8" /> 　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 　　<title>demo</t...
js的居中设置
weixin_39349045的博客
01-04 1620
1、在body标签下方写上,用来存放js代码。通过class定位到div，通过css()方法让文字居中。
css3设置box-pack和box-align让div里面的元素垂直居中
02-08 146
在要加的元素里面添加这些样式 display: box;display: -webkit-box;display: -moz-box; -webkit-box-pack:center;-moz-box-pack:center;-webkit-box-align:center;-moz-box-align:center; 内容超出3行就隐藏显示省略号d...
前端文字太多换行居中_请注意！有关学习前端的一些“坑”，别踩！
weixin_39641738的博客
11-25 371
都记录一些有关前端方面的冷知识或者一些易踩坑点，防止大家踩坑。JavaScript所有对象都有 __proto__ 属性，都指向创造对象的函数对象的 prototype。上传文件要使用 formdata 包装。Promise.prototype.catch 方法是 .then(null,rejection) 的别名。同一个 EventTarget 注册了多个相同的 EventListener，那么...
VUE导出Excel，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等
03-29
SheetJS免费版的不支持格式，比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支，且支持各种格式，可以做到文字居中，自动换行，列宽设置，单元格合并，冻结表头等。
垂直居中.docx
12-20
这种方法简单易行，但需要注意 overflow:hidden 的设置，以防止内容超出容器或产生自动换行。 代码示例： ``` div { height: 25px; line-height: 25px; overflow: hidden; } ``` 这种方法适用于单行文字，但是在...
模糊：一个易于使用的框架，用于创建终端应用程序。 具有相对定位，居中，自动换行和自动菜单生成功能
02-17
特征： 相对定位百分比垂直和水平居中自动换行自动菜单生成模块化的应用程序结构入门要使用Blurses，只需克隆存储库，然后将blurses目录的副本放置在项目目录中。 导入使用： from blurses import Blurses 包含示例...
WPF学习笔记-FlowDocument实现表格单元格垂直居中以及边框设置
最新发布
04-01
其中的块元素Table可以很方便的添加并展示表格，但是其无法实现自动换行，我尝试了网上搜索解决方案以及自己尝试修改。 在网上搜索了不同的解决方案，包括手动计算高度，通过Margin属性来实现类似居中的问题，或者...
VFP]对报表.FRX文件的分析
03-29
2-居中) 63 TOPMARGIN N 3 上边界高度 64 BOTMARGIN N 3 下边界高度 65 TOTALTYPE N 2 计算类型 66 RESETTOTAL N 2 重置（1-表尾，2-页尾） 67 RESOID N 3 源标识 68 CURPOS L 1 是否显示当前位置 69 ...
7种方式实现垂直居中
小陈的博客
09-23 2721
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
JavaScript字符串换行
TwelveSpring的博客
05-23 2万+
JavaScript字符串换行方式记录
IOS图层Layer学习笔记（五）—— CATextLayer
谢攀琪的博客
11-26 3657
CATextLayer提供了简单的文本布局.
纯CSS实现文字一行居中，多行左对齐的方法
热门推荐
FungLeo's Blog
11-12 4万+
纯CSS实现文字一行居中，多行左对齐的方法其实这种需求还是蛮常见的。主要用于产品列表页面，用于产品图片下面，显示产品的名称。但是其纯CSS实现实在是烧脑，一般就放掉这个需求，或者，使用JS实现。但是，我坚信这一定能用纯CSS来解决！！我为什么如此信念笃定呢？因为我多年前在蓝色理想论坛见到过高手解决过！！！好吧。我实在是找不到这个帖子了，万能的百度没能给我解决方案。我只能自己想办法了。问题描述如何使用
单行文字居中显示、多行换行文字靠左显示
Judy_qiudie
11-22 665
1.CSS布局
css 文字自动换行并垂直居中div效果
firesnow的博客
06-21 1万+
一个学习使用的笔记实例，用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容都可以居中显示了哦。 demo .box { position: relative; width: 50
css 带换行的垂直居中
weixin_30530339的博客
09-23 602
span{ display:flex; justify-content:left; align-items:center; height:100%; width:100%; } 　　 转载于:https://www.cnblogs.com/yesicoo/p/11572357.htm...
再谈自适应垂直居中
weixin_34289454的博客
01-03 82
作者：滴滴公共前端团队 - Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在开发一个 Toast组件时，遇到了一些有趣的问题，首先来看一下需求 需求为宽高不定，上下左右垂直居中，如下图 代码如下： HTML &lt;div class="toast"&gt;提交成功&lt;/div&gt;复制代码CSS .toast { position: fixed; top: 50%;...
文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
lml_little的博客
02-17 1万+
css中垂直居中样式vertical-align:middle属性,但是此属性只对标签、、，和内联元素display设置为inline/inline-block起作用，其他的则不起作用。 1.单行文本垂直居中： 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如： div{ height:25p
android drawtext自动换行高居中
06-08
要在 Android 中使用自动换行和垂直居中显示的 `drawText`，可以使用 `StaticLayout` 类来实现。以下是一个示例代码： ```java String text = "这是一段需要自动换行和垂直居中的文本"; TextPaint paint = new TextPaint(); paint.setTextSize(30); paint.setColor(Color.BLACK); int width = 400; // 画布宽度 int height = 200; // 画布高度 Alignment alignment = Layout.Alignment.ALIGN_CENTER; // 水平居中显示 StaticLayout staticLayout = new StaticLayout(text, paint, width, alignment, 1f, 0f, false); int textHeight = staticLayout.getHeight(); // 文本高度 canvas.save(); canvas.translate(x, y + (height - textHeight) / 2); // 文本起始位置，将文本垂直居中 staticLayout.draw(canvas); canvas.restore(); ``` 其中，`StaticLayout` 的构造函数中，第一个参数为需要显示的文本，第二个参数为画笔，第三个参数为画布宽度，第四个参数为文本对齐方式，第五个参数为行间距，第六个参数为行距偏移量，最后一个参数为是否包含字间距。然后调用 `draw` 方法将 `StaticLayout` 绘制到画布上，注意需要先保存画布状态再进行平移。在平移时，将 `y` 坐标加上 `(height - textHeight) / 2`，即可将文本垂直居中显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值