HTML优化数据显示页面样式;文本自动换行

背景的星星点点用到javascript库在线代码引入(http://www.jq22.com/),样式很不错,中间展示页面要解决的问题有:button框居中,文本顶头,文字自动换行

一、button居中用到了下面代码;但在后来调试中发现这两行代码作用不同;第一行加了第一行后白色边框变宽,如下图一;不加第二行整体变窄,如下图二

<span style="white-space:pre">	</span><div style="display: inline-block;">
<span style="white-space:pre">	</span><div class="container">

图一


图二


二、文本顶头

文字本是居中的,首先试了向左偏移,代码如下;这种方式如果文字是固定的可行,但如果从数据库取数据文本内容变化,就不可用

<div style="margin-left: 250px">
<span style="white-space:pre">	</span>然后用text-left解决了,代码如下<pre name="code" class="html"><p class="text-left" style="height:20px;"><strong>name</strong>

 三、文本自动换行,给css加样式display:inline-block实现; 

<pre name="code" class="html"><span class="text-left display:inline-block"  style="white-space:nowrap;">
实现强制不换行
<span class="text-left display:inline-block"  style="white-space:normal;">


 



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值