word-break属性和css换行显示

  这几天在做项目的时候,遇到了比较棘手的问题,便是在一个标签里边展示内容,如果说展示中文汉字,一点问题都没有,但是只要连续展示英文字母或者中文的标点符号(中间不带空格),那么所渲染的内容就不会换行,而是超出标签来显示,如下图:

  

  为了解决让所有的内容都不超出标签的宽度,超出后自动换行的问题,便找到了word-break这个属性。

    word-break的其中有两个值为break-word和break-all,下面将对这两个值做一比较:

      break-word:英文单词在一行中所剩下的空间无法放下,那么这个单词并不会换行显示,而是将这个单词从盒子最大宽度处截开(一个单词显示两行,前半截在第一行,后半截在第二行);

      break-all:英文单词在一行中所剩下的空间无法放下,那么这个单词就会换行显示,保证单词不会被截断(一个单词显示一行)

  所以解决这个问题的办法就是在这个盒子上添加一个属性word-break:break-word;就能搞定。

 

  单行或多行容纳不下内容显示...less样式

/*单行溢出*/
.one_txt_cut() {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt_cut(@num:2) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: @num;-webkit-box-orient: vertical;
}

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第四种行转列

--动态处理 select A.StuName,A.BZKTypeName,cast(A.BKCODE as varbinary(MAX)) even, row_number() over (partition by StuName,BZKTypeName order by getdate()) ID into #t1 from BKLIST A --where StuName林健辉 declare sql1 varchar(max) declare sql2…

React-router的基本使用

1、安装使用 $ npm install -S react-router import { Router, Route, hashHistory } from react-router;render((<Router history{hashHistory}><Route path"/" component{App}/></Router> ), document.getElementById(app)); 1.1、版本问题 reac…

九宫格有规律高亮滚动效果

前几天朋友去面试&#xff0c;面试官要求当场用九宫格写出一个滚动有规律的大转盘滚动高亮效果&#xff0c;结果可想而知。如下图&#xff1a; 也就是说当页面刚进来的时候&#xff0c;红色方块在左上角&#xff0c;接下来按照图上所标注的箭头方向来依次循环。当我听说了这个面…

使用Maven原型高效创建Eclipse模块

Maven Archetype是一个项目模板工具包&#xff0c;可为开发人员提供生成内置或自定义脚手架工件的参数化版本的方法。 最近&#xff0c;我将其应用于我们的Xiliary P2存储库&#xff0c;以实现Eclipse模块存根创建的自动化。 由于效果很好&#xff0c;所以我认为值得在这篇文章…

framelayout

编写的mail.xml文件: <?xml version"1.0" encoding"utf-8"?><FrameLayout xmlns:android"http://schemas.android.com/apk/res/android" android:id"id/frame" android:layout_width"fill_parent" android:layou…

扩展Asterisk1.8.7的CLI接口

我之前有一篇文章&#xff08;http://www.cnblogs.com/MikeZhang/archive/2012/04/14/asteriskCLIAppTest20120414.html&#xff09;介绍过如何扩展asterisk的cli接口&#xff0c;本篇是它的继续&#xff0c;总结下&#xff0c;也方便我以后查阅。 大部分情况下&#xff0c;配置…

CSS中的 ',' 、''、'+'、'~'

1、群组选择器&#xff08;,&#xff09; /* 表示既h1&#xff0c;又h2 */ h1, h2 {color: red; } 2、后代选择器&#xff08;空格&#xff09; /* 表示 h1 下面的所有 span 元素&#xff0c;不管是否以 h1 为直接父元素 */ h1 span {} 3、子元素选择器&#xff08;>&#x…

单片机第三季-第七课:STM32中断体系

目录 1&#xff0c;NVIC 2&#xff0c;中断和事件的区别 3&#xff0c;优先级的概念 4&#xff0c;如何实际编程使用外部中断 5&#xff0c;STM32开发板通过按键控制LED 5.1&#xff0c;打开相应GPIO模块时钟 5.2&#xff0c;NVIC设置 5.3&#xff0c;外部中断线和配套…

【学亮IT手记】angularJS select2多选下拉框实例

永远保持对大部分知识的好奇心&#xff0c;学习从不枯燥&#xff0c;也没有被逼学习一说&#xff0c;乐此不疲才是该有的心态和境界&#xff01;&#xff01;&#xff01; 引入相关js库&#xff1a; html部分代码&#xff1a; angularJS定义数据源变量&#xff1a; 更多专业前端…

Devoxx Hackergarten的企业Web应用程序原型

我已经连续10年参加DevoxxBe了 。 这是我最喜欢的Java会议&#xff0c;但是谈话时间表并不总是最佳的&#xff1a;有时我想同时看2个精彩的谈话&#xff01; 因此&#xff0c;在Devoxx的Hackergarten&#xff0c;在参加讲座之间&#xff0c;我们中的一些人开始构建Web应用程序以…

谈一谈Http Request 与 Http Response

谈一谈Http Request 与 Http Response   写在前面的话&#xff1a;最近帮朋友弄弄微信商城&#xff0c;对于微信的基础开发&#xff0c;基本上就是各种post、get&#xff0c;有时是微信服务器向我们的服务器post、get数据&#xff0c;有时需要我们自己的服务器向微信服务器各…

增压的jstack:如何以100mph的速度调试服务器

使用jstack调试实时Java生产服务器的指南 jstack就像U2一样-从时间的黎明就一直在我们身边&#xff0c;我们似乎无法摆脱它 。 除了笑话&#xff0c;到目前为止&#xff0c;jstack是您调试军用生产服务器中最方便的工具之一。 即便如此&#xff0c;我仍然认为它在情况恶化时能够…

Zabbix监控多个JVM进程

一、场景说明&#xff1a; 我们这边的环境用的是微服务&#xff0c;每个程序都是有单独的进程及单独的端口号&#xff0c;但用jps查询出来的结果有些还会有重名的情况&#xff0c;所以某些脚本不太适用本场景&#xff1b; 二、需求说明&#xff1a; 需使用Zabbix-server监控每个…

Android 4.0 Launcher源码分析系列(二)

原文&#xff1a;http://mobile.51cto.com/hot-314700.htm 上一节我们研究了Launcher的整体结构&#xff0c;这一节我们看看整个Laucher的入口点&#xff0c;同时Laucher在加载了它的布局文件Laucher.xml时都干了些什么。 我们在源代码中可以找到LauncherApplication&#xff0…

使用JFace Viewer延迟获取模型元素

Eclipse JFace Viewers显示的模型元素有时需要花费大量时间来加载。 因此&#xff0c; 工作台提供了IDeferredWorkbenchAdapter类型以在后台获取此类模型元素。 不幸的是&#xff0c;似乎仅通过DeferredTreeContentManager派生的AbstractTreeViewer支持此机制。 因此&#xff…

Eclipse扩展的轻量级集成测试

最近&#xff0c;我为Eclipse扩展点评估引入了一个小助手。 辅助程序努力减少通用编程步骤的样板代码&#xff0c;同时增加开发指导和可读性。 这篇文章是希望的后续文章&#xff0c;展示了如何将实用程序与AssertJ定制断言结合使用&#xff0c;以编写针对Eclipse扩展的轻量级…

二:熟悉 TCP/IP 协议

一篇文章带你熟悉 TCP/IP 协议&#xff08;网络协议篇二&#xff09; 同样的&#xff0c;本文篇幅也比较长&#xff0c;先来一张思维导图&#xff0c;带大家过一遍。 一图看完本文 一、 计算机网络体系结构分层 计算机网络体系结构分层计算机网络体系结构分层不难看出&…

DOM操作案例之--全选与反选

全选与反选在表单类的项目中还是很常见的&#xff0c;电商项目中的购物车一定少不了这个功能。 下面我只就用一个简单的案例做个演示吧。 <div class"wrap"><table><thead><tr><th><input type"checkbox" id"j_cbA…

带有Swagger的Spring Rest API –公开文档

创建API文档后&#xff0c;将其提供给涉众非常重要。 在理想情况下&#xff0c;此发布的文档将具有足够的灵活性以解决任何最新更改&#xff0c;并且易于分发&#xff08;就成本以及完成此操作所需的时间而言&#xff09;。 为了使这成为可能&#xff0c;我们将利用我在上一篇文…

hinkphp项目部署到Linux服务器上报错“模板不存在”如何解决

检查了服务器上的文件&#xff0c;并没有缺少文件&#xff0c;再次上传文件到服务器&#xff0c;还是报错。莫名其妙&#xff0c;怀疑是代码问题。 仔细检查后&#xff0c;发现是模板的文件名问题&#xff1a; 用过TP的都知道&#xff1a;thinkphp会在$this->display()的时候…