未调整之前:客户信息显示不全

调整后实现效果:

补充CSS知识:

一、强制换行
word-break: break-all; 只对英文起作用,以字母作为换行依据。 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。 white-space: pre-wrap; 只对中文起作用,强制换行。 word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于: 、word-break:break-all
假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。 、word-wrap:break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。 二、禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; 是禁止换行。
overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。

补充:http://blog.csdn.net/shangs2010/article/details/7075164

odoo开发笔记:前端显示强制换行的更多相关文章

  1. odoo开发笔记--前端搜索视图--按照时间条件筛选

    odoo在日常使用中,常会有这样的需要,比如,某个列表按照 日 .周.月.年来过滤搜索. 效果: 那么如何实现呢,如下是一段不同写法的样例代码,提供参考. <!--某模型 搜索视图--> ...

  2. odoo开发笔记 -- 前端开发相关

    https://www.cnblogs.com/lyzg/p/5634565.html http://dmyz.org/archives/598 https://www.jianshu.com/p/6 ...

  3. C#的百度地图开发(四)前端显示与定位

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  4. odoo开发笔记 -- div标签代替odoo button写法

    odoo开发笔记 -- div标签代替odoo button写法 并调用自定义js <footer> <div id="confirm_request_cloud_repo ...

  5. odoo开发笔记 -- 搜索视图继承扩展

    odoo开发笔记 -- 搜索视图继承扩展

  6. odoo开发笔记 -- 后台日志输出及分析

    odoo开发笔记 -- 后台日志输出及分析 附:日志分析软件

  7. odoo开发笔记--一个模块显示两个一级菜单

    场景描述: 在已启动开发的模块中,odoo顶部一级菜单只有一个“会员管理”,需求是:在同一级顶部菜单,增加新菜单“产品管理”.举例如图:       处理方式: 按照odoo的机制,实现这种效果,可以 ...

  8. odoo开发笔记 -- tree视图按指定字段group_by分组显示

    注意点: view视图文件中的搜索视图要放在action视图的前边. 在action视图中,要写search_view_id, 还有context, search_default_group_by_字 ...

  9. odoo开发笔记 -- 传递上下文实现列表视图按照指定条件过滤显示

    按钮传递上下文: <xpath expr="//div[@name='dec_work_sheet_id']" position="after"> ...

随机推荐

  1. 常量表达式和constexpr(c++11)

    常量表达式 常量表达式是指值不会改变且在编译阶段就能得到计算结果的表达式(两点要求) ; //是常量表达式 ; //是常量表达式 "; const int siz=s.size(); //不 ...

  2. mysql学习之路_视图

    视图 视图:view是一种有结构的但是没有结构来源的虚拟表,虚拟表的结构来源不是自己定义的而是从对应的基表中产生(来源) 创建视图 基本语法: Create view 视图名字 as select 语 ...

  3. php 类与对象 面向对象编程 简单例子

    <?php class Foo { //类 名称为Foo public $aMemberVar = 'aMemberVar Member Variable'; //类变量 public $aFu ...

  4. ArcGIS API 和GIServer

    ArcGIS  API 和GIServer 先后以ArcGIS Server(9.3)和GIServer(2.2)为服务端,以ArcGIS API for Flex(1.2).ArcGIS API f ...

  5. 利用tcpcopy引流过程

    tcpcopy是一个tcp流量复制工具,当前还支持udp和mysql流量的复制. 目的: 将机器10.24.110.21的5000端口流量引流到机器10.23.25.11的5000端口. 示例:将10 ...

  6. hibernate之三种时态之间的转换

    判断状态的标准 oid  和    session相关性 public class HibernateUtils { private static SessionFactory sessionFact ...

  7. 【python3+request】python3+requests接口自动化测试框架实例详解教程

    转自:https://my.oschina.net/u/3041656/blog/820023 [python3+request]python3+requests接口自动化测试框架实例详解教程 前段时 ...

  8. USTC《现代软件工程》春季学期——第一次个人作业:词频统计

    截止日期 2018年3月29日23:59 要求 1. 对源文件(*.txt,*.cpp,*.h,*.cs,*.html,*.js,*.java,*.py,*.php等,文件夹内的所有文件)统计字符数. ...

  9. js获取元素下标

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  10. AngularJS $watch 性能杀手

    双向绑定是AngularJS核心概念之一,它给我们带来了思维的转变,不再是以DOM为驱动,而是以Model为核心,View中写上声明式标签(指令或{{}}),AngularJS会在后台默默同步View ...