css 避免单词截断

HTML+CSS 对于英文单词强制换行但不截断单词的解决办法

如何处理长的单词和链接(强制换行,连接符,省略号等) 我们在前端开发中经常会遇到一些很长的文本串从它的容器中溢出,例如: 通过这样一段css可以有效解决这种问题: .dont-break-out { /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* 这个的使用在web-kit中有些危险,他可能会阶段所有东西 */ word

用 CSS 实现字符串截断

[要求]:如何用css实现字符串截断,超出约定长度后用缩略符...代替? ♪ 答: <html> <head> <meta charset="UTF-8"> <title>用 css 实现字符串截断</title> <style> div { width: 300px; overflow: hidden; /*规定当内容溢出元素框时发生的事情*/ white-space: nowrap; /*设置如何处理元素内

HTML语言基本单词与css基本单词

DOCTYPE 文档 html 网页 head 头部 body 主体 title 题目 p 段落 color 颜色 style 样式 background 背景 position 位置 relative 相对的 absolute 绝对的 font-style 字体样式 font-family 字形 font-weight 字体粗细 font 字体 background-position

HTML/CSS 常用单词整理

页面布局(layout) header 头部/页眉: index 首页/索引: logo 标志: nav/sub_nav 导航/子导航: banner 横幅广告: main/content 主体/内容: container/con 容器: wrapper/wrap 包裹(类似于container): menu 菜单: sub_menu/second_menu 子菜单/二级菜单: list 列表: section 分区/分块(类似于div); article 文章: aside 侧边栏/广告: f

CSS 属性单词

.container {padding:0px; height:90%; width:100%; margin:0;}#header {height:0px; width:100%; padding:0px; margin-bottom:0px; border:0px solid #008888; overflow:auto; } #main {width:100%; height:95%; border:0px solid #ff8888;} #left {width:78%; height:

css常用单词

!!!if---表达式为真则语句执行一次 !!!while---表达式为真则一直执行循环 !!!break---直接终止循环 !!!continue---结束当次循环 !!!align="center 排列居中 !!!选中文字段落后,英文状态下ct

CSS样式属性单词之Left

通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左在CSS选择器代码中有时也需要设置left,设置对象盒子靠左距离多少,就需要position设置同时再设置left进行实现对象靠左需求. 1.使用说明如果单独对盒子对象设置left,是无效的,需要同时设置position:relative或者position:absolute 2.语法 left值可以为正

css疑难汇总

关于a标签不换行顶开容器的问题(转自): 我们用div,p,ul,li(等块级元素)布局给其设定了特定的width,那么就会自动的换行.用span,a(等内联元素)设置了display:inline-block,或者display:block;也可以自动换行了.(但是含英文的时候这种方法就无效了,还是会超出来) 我们一般控制换行所用到的CSS属性一共三个:word-wrap;word-break;white-space; word-wrap语法:各浏览器均能识别 word-wrap:norm

css文本换行相关属性及解释

本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: normal(默认) | break-word各个浏览器均能识别参数: normal: 允许内容顶开指定

css+html 关于文本的总结（整理中）

布局1:固定行数 <div> <p>示例文字示例文字示例文字示例文字</p> </div>  div{ width:100px; overflow:hidden;} P{ overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这是控制行数,此行代码必须搭配上面两行代码才起作用 */ }

CSS 强制换行和禁止换行学习

强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap; 只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; http://jdm.j

CSS样式中文字的换行

在我们做输出时可能会遇到这样一个问题,就是汉字和英文字母相遇,然后自动换行的问题.例如,当我在输出产品标题时,由于产品名称比较长,包括汉字和英文字母,FF下浏览是正常的,而IE下面英文会出现换行.当然,如果您是前端高手,纯粹是小菜一碟.于我而言,经常会忘记在样式里定义,就会出现这样的问题:在FF 里样式是如效果图一样,汉字和英文在同一行,而在IE下面,汉字和英文字母分别占据一行.这时只需在样式里设置: word-break: break-all;就可以解决问题了. 今天我就对这个知识点做个小总

CSS 中的强制换行和禁止换行

强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap; 只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Jimdo系统在设计上一

CSS 技巧总结

CSS 技巧和经验列表 1. 如何清除图片下方出现的几像素的空白方法一: img{display:block;} 方法二: img{vertical-align:top;} 除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以方法三: #test{font-size:0;line-height:0;} test为img的父元素 2. 设置滚动条的颜色 3. 文本溢

css自动换行 word-break:break-all和word-wrap:break-word(转)

css自动换行 word-break:break-all和word-wrap:break-word 2012-12-31 17:30 by greenal, 159 阅读, 0 评论, 收藏, 编辑 css 自动换行 http://www.5dsky.com/blog/a/?id=61 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于:

css文本超出部分省略号&CSS强制换行总结

word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了. 支持版本:IE5以上该行为与亚洲语言的 normal 相同.也允许非亚洲语言文本行的任意字内断开.该值适合包含一些非亚洲

css中设置table中的td内容自动换行

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了. 2,word-wrap:break

文本多行省略号（CSS最优方案）

Float定位溢出隐藏优点: 纯CSS实现,性能好,不用js调优兼容性高多行省略,自动显示缺点: 单词截断代码如下: <div class="ellipses-div"> <span class="ellipses-text">这是一段test字段,秋水共长天一色,落霞与孤鹜齐飞.这是一段test字段,秋水共长天一色,落霞与孤鹜齐飞.这是一段test字段,秋水共长天一色,落霞与孤鹜齐飞.这是一段test字段,秋水共长天一色,落霞与孤

css让文字显示特定行数，多余的显示省略号

/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ } 1,

[Erlang 0107] Erlang实现文本截断

抽时间处理一下之前积压的一些笔记.前段时间有网友 @稻草人问字符串截断的问题"各位大侠 erlang截取字符串一般用哪个函数啊",有人支招用string:substr/3,紧接着他补充了一下"大侠们一个字符串有汉字和字母组合我想截取但是不管用什么方法每个汉字的长度都是3 字母是1 截取出来总是有乱码还望高手们赐教",我们一步步看看这个问题. 在Eshell先看下什么情况,貌似结果很理想啊,但是考虑到Erlang Shell和文件对编码的处理方式

CSS强制性换行

一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行. 解决方法(以IE,chrome,FF为测试浏览器): { word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word

css 避免单词截断

热门专题