HTML:<div class="na-i">
<span> </span>
</div>
样式:.na-i{
overflow-y: scroll;
overflow-x: auto;
height: auto;
position: relative;
margin: 0 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #DEDEDE;
}
.na-i span {
width: 90%;
word-wrap:break-word;

}
JQuery:$(function(){
$.get(
'http://name/get?login='+login+'&access_token='+tok+'',function(data){
if(data.status == 200){
// alert('成功!');
if(data.data.desc == ''){ //判断内容是否为空
$('.top2').hide();
$('#rzheng2').hide();
} $('.na-i span').text(data.data.desc);
             }
}
)
})
1、word-wrap:【换行】
定义:允许长单词或 URL 地址换行到下一行。
默认值: normal
normal:只在允许的断字点换行(浏览器保持默认处理)。
break-word:在长单词或 URL 地址内部进行换行。
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。
 

2、word-break:【断词】

  定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行。

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

列子如图:


总结:


word-break:当行尾放不下一个单词时,决定单词内部怎么摆放 => 决定句子末尾放不下单词时,单词是否换行


break-all:强行摆放,挤不下剩下的就换下一行显示。


keep-all:放不下,就另外起一行展示;如果还放不下就溢出显示。


word-wrap:当行尾放不下时,决定单词内是否允许换行 => 决定单词内该怎么换行


normal:单词太长,换行显示,在超过一行就溢出显示。


break-word:当单词太长时,先尝试换行;换行后还是太长,单词内还可以换行


附:
overflow-x属性:所有主流浏览器都支持 overflow-x 属性
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话
visible 不裁剪内容,可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框,则应该提供滚动机制。
no-display 如果内容不适合内容框,则删除整个框。
no-content 如果内容不适合内容框,则隐藏整个内容。
 
 

获取文章,显示时自动换行(word-break与 work-wrap的区别)的更多相关文章

  1. wordpress对显示某分类目录的文章列表页时对单个文章显示字数限制和省略

    wordpress会在对应的此类列表页面模板中,遍历输出每篇文章的信息,缩略图,作者,正文,标题等, 输出具体的正文的部分 使用这样一句 <?php the_content(''); ?> ...

  2. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  3. iOS:Gif动画功能(显示gif动画、获取gif动画时长、获取gif动画执行次数)

    一.简单介绍 gif动画是iOS开发中很常用的一个功能,有的是为了显示加载视频的过程,更多的是为了显示一个结果状态(动画更直观). 那么如何执行gif动画,方法有很多.(这里只写一下方法三,前两种之前 ...

  4. Android相机、相册获取图片显示并保存到SD卡

    Android相机.相册获取图片显示并保存到SD卡 [复制链接]   电梯直达 楼主    发表于 2013-3-13 19:51:43 | 只看该作者 |只看大图  本帖最后由 happy小妖同学 ...

  5. [LeetCode] Word Break II 拆分词句之二

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  6. Selenium2学习-022-WebUI自动化实战实例-020-JavaScript 在 Selenium 自动化中的应用实例之二(获取浏览器显示区域大小)

    前几篇文章中简略概述了,如何获取.设置浏览器窗口大小,那么我们该如何获取浏览器显示区域的大小呢?此文讲对此进行简略概述,敬请各位小主参阅.若有不足之处,敬请各位大神指正,不胜感激! 获取浏览器显示区域 ...

  7. Leetcode#139 Word Break

    原题地址 与Word Break II(参见这篇文章)相比,只需要判断是否可行,不需要构造解,简单一些. 依然是动态规划. 代码: bool wordBreak(string s, unordered ...

  8. 【leetcode】Word Break (middle)

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  9. 139. Word Break

    题目: Given a string s and a dictionary of words dict, determine if s can be segmented into a space-se ...

随机推荐

  1. PageHelper原理

    1.要是用pagehelper,首先maven项目,要引入 <dependency> <groupId>com.github.pagehelper</groupId> ...

  2. Java虚拟机系列(四)---查看GC日志

    这一节穿插一点如何在eclipse中配置并查看某个Java应用GC日志的知识点,我也是通过调研知道的,因为书中写的不是很详细,主要是为下一节做准备. 一.eclipse中配置GC 在eclipse中如 ...

  3. No module named 'sklearn.impute',更新scikit-learn

    -------我错了,本篇作废,我把自己的包更新坏了,大家不要往下看了------------------最终我是把anaconda卸载重装的--------- 使用scikit-learn模块进行缺 ...

  4. 关于Git回退再前进造成本地代码和远程仓库代码不一致的问题

    事情经过:  git push 提交之后(版本2.0), 回退, 然后做了一些修改, 发现有问题,于是脑抽回退git reset --hard HEAD^ (版本1,0), 然后又前进到之前那个版本( ...

  5. JAVA面试常见问题之常见集合篇

    1.List 和 Set 区别 List 可以允许重复的对象. 可以插入多个null元素. 有序容器 Set 不允许重复的对象. 只能插入1个null元素 无序容器,可以使用TreeSet实现有序 2 ...

  6. 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...

  7. 洛谷P2347 砝码称重 [2017年4月计划 动态规划01]

    P2347 砝码称重 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输出格式 输入格式: 输入方式:a1 a2 a3 a4 a5 a6 (表示1 ...

  8. R语言可视化--qplot函数

    ggplot绘图系统 使用动词名词形容词构造句子的过程,将数据映射到美学属性上的过程,由层组成 绘图函数 qplot() :参数包括美学属性.几何体.面.统计.坐标系.主题这些层次. ggplot() ...

  9. 两张图搞清composer install与update区别 - 今日头条(www.toutiao.com)

    composer update : 主要是在开发阶段使用,根据我们在composer.json文件中指定的内容升级项目的依赖包. composer install : 主要是在部署阶段使用,以便在生产 ...

  10. bzoj 1026 [SCOI2009]windy数——数位dp水题

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1026 迷恋上用dfs写数位dp了. #include<iostream> #in ...