span 文本内容超过宽度自动换行

  1. span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;}

white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 
取值: normal | pre | nowrap | pre-wrap | pre-line | inherit 
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) 
pre: 保持HTML源代码的空格与换行,等同与pre标签 
nowrap: 强制文本在一行,除非遇到br换行标签 
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 
inherit: 继承 
初始值: normal 
继承性: 是 
适用于: 所有元素 
white:白色.space:间隔,距离

时间： 2024-08-01 23:40:53

span 文本内容超过宽度自动换行的相关文章

《转载》ASP.NET GridView中文本内容无法换行(自动换行/正常换行)

ASP.NET GridView中文本内容无法换行(自动换行/正常换行) 作者: 字体:[增加 减小] 类型:转载 用GridView来显示课程表,每个单元格的内容包括课程名.上课地点.教师姓名,然后我想让它们分行显示,感兴趣的朋友可以了解下,或许对你有所帮助 最近做项目的时候,遇到这样一个问题:我用GridView来显示课程表,每个单元格的内容包括课程名.上课地点.教师姓名,然后我想让它们分行显示,效果如下图: 可是呢,GridView太顽强了,不管我拼接字符串时用“\r\n”还是"<b

[TimLinux] JavaScript table的td内容超过宽度缩为三个点

1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table/td自动隐藏内容</title> <link rel="stylesheet" href="my.css" /> </h

文本内容超出宽度智能换行

style='word-break: keep-all;' 添加上面样式后的效果:红框内 去掉上面style样式后的效果如下图: 各取所需,如果宽度不够显示所有文字,则智能选择上一个空格的地方"换行"显示   还适用于日期展示,年月日与时间的展示

内容超过宽度后显示省略号

<div class="demo">让我们荡起双桨,小船儿推开波浪,海面倒映着美丽的白塔,四周环绕着绿树红墙!</div> <style> .demo{ width:50px; border:1px solid pink; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } </style> 显示如下:

折叠多余文本内容，点击查看更多

command:设定规定的行数,当文本内容超过时,折叠并有一个“查看更多”的按钮 step1:编写html...... <p statue="0" class="text close_text"> //status是自定义的属性,“0”是false,“1”为True texttexttextvvshjhhsbcnxgfggggkshjahcjbkjciwhiuheohbcjkbcnzlkxkjidjoieklkxm.,cxzmkcowdjijdpoweo

CSS实现内容超过长度后以省略号显示

样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格. overflow: hidden 隐藏超出单元格的部分. text-overflow: ellipsis 将被隐藏的那部分用省略号代替.

文本内容值

<div><span>文本内容</span></div> 1.获取设置元素内容  html( ) $("div").html("123");    // 设置div的元素内容 ("div").html( );   // <span>123</span> 2.获取设置元素文本内容  text( ) $("div").text( " 345"

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

datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下: 图1: 图2: 解决方法 定义表格时,设置nowrap属性为false. <table id='tt' class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:

文本超过宽度显示省略号

文本超过宽度,以省略号显示有2种, 第一种单行不换行 <style> .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } </style> 第二种2行或者2行以上的文本要在结尾省略号超出部分