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

原创 2015年11月20日 21:40:46

背景的星星点点用到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;">






版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没...
  • liuyan19891230
  • liuyan19891230
  • 2016年03月24日 10:21
  • 48279

MYSQL 数据在HTML中换行显示

http://blog.csdn.net/xbw673009796/article/details/9219279 在taxtarea中输入的文本。如果含有回车或空格。在界面上显示的时候则不哪么...
  • jajavaja
  • jajavaja
  • 2014年03月21日 09:52
  • 7208

jasperreport 文本太多,显示不全,解决办法

jasperreport 文本太多,显示不全,解决办法
  • wangjun5159
  • wangjun5159
  • 2016年04月14日 16:03
  • 3350

解决Eclipse和myeclipse在进行 html,jsp等 页面编辑时,自动格式化变丑的问题

在eclipse和myelipse写JAVA代码时中使用ctrl+shift+f 快捷键自动排版省时又省力,排版后的代码规范美观又层次性,但在我们写jsp或html代码时,使用这个快捷键排版简直奇丑无...
  • KuangYeYaZi
  • KuangYeYaZi
  • 2015年01月22日 13:18
  • 6382

easyui在jsp页面的td文本过长时无法自动换行的解决方法

在用easyui写后台程序的时候发现了td无法自动换行的问题,当一个td单元格里的文本过长的时候,单元格会一直拉伸,这样用户体验度会变得很差而且不美观。刚开始的代码和界面效果如下: 尝试着上网找...
  • Xanthin
  • Xanthin
  • 2015年12月18日 10:16
  • 2369

html5-canvas的绘制文本自动换行

本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题...
  • lishihong108
  • lishihong108
  • 2016年09月09日 08:43
  • 4397

PHP html css层叠样式表 排版定位技术 和 br标签定义换行

  • 2013年11月26日 19:37
  • 1KB
  • 下载

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

一、对于div强制换行 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; w...
  • Lpandeng
  • Lpandeng
  • 2017年06月06日 17:50
  • 4118

textview中自动换行显示文本内容

在做项目中遇到textview显示文本内容,一行显示不下,但是textview并没有自动换行显示。如下图情形(此图是借用网上的) 根据网上的内容设置了android:ellipsize="none...
  • wwongcong
  • wwongcong
  • 2016年07月22日 14:03
  • 11742

div+css实现文本原格式显示与自动换行

html的标签用可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 而为了限制文本显示的范围,一般使用div+css设定自动换行或缩略等样式。对于未...
  • outstandzhou
  • outstandzhou
  • 2014年02月27日 13:55
  • 1668
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML优化数据显示页面样式;文本自动换行
举报原因:
原因补充:

(最多只允许输入30个字)