html 中限制一行的字数

最新推荐文章于 2024-08-08 14:06:46 发布

你的英姿

最新推荐文章于 2024-08-08 14:06:46 发布

阅读量2.4w

点赞数 1

分类专栏： jsp前端文章标签： css

jsp前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

大神写的代码：
.room-cell {
display: inline-block;//这样写有好处就是，span后面不会出现消不掉的margin-xxx填充，以前是这样的display:block;
table-layout: fixed;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
自己的理解：对于一行，1、复制room-cel的样式，2在div或者span中直接给class负上room-cel 3,要添加display: inline-block;(div不需要，span要)


overflow:hidden; text-overflow:ellipsis;这两个属性我用了，只能在一行里省略掉多余部分。但是我想让文本第一行正常换行，第二行末尾才用省略号隐藏多余部分，如何实现？

<html>
<title>css控制字数</title>
<head>
<style type="text/css">
.dd
{
border: solid 1px gray;
width:180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
course:hand;
}
</style>
</head>
<body>
<span class="dd">

信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数
</span>
<br>
<div class="dd">
信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数
</div>
</body>
</html>

看到效果后，您应该相信这不是虚言了吧，o(∩_∩)o...！

其中white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增

的。

继承性：Yes
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法：
object.style.whiteSpace="nowrap"在我们的 HTML DOM 教程中，您可以找到更多有关 whiteSpace 属性

的细节。

p
  {
  white-space: normal
  }
可能的值
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

名称：text-overflow
分类：IE专有样式
简述：设置是否使用省略号标示文本溢出
概述：text-overflow是设置是否使用省略号标示文本溢出的样式(Style)。
text-overflow详细说明语法：

text-overflow : clip | ellipsis

取值：

clip : 默认值。不显示省略标记(...)，而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)

overflow 属性设置当元素的内容溢出其区域时发生的事情。

继承性：No

说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素

框中可以放下所有内容也会出现滚动条。
JavaScript 语法
CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法：
object.style.overflow="hidden"在我们的 HTML DOM 教程中，您可以找到更多有关 overflow 属性 的细节。

在我们的 HTML DOM 教程中，您也可以找到完整的 Style 对象参考手册。
例子
p
  {
  overflow: scroll
  }
可能的值
值 描述
visible 默认。内容不会被修剪，会呈现在元素之外。
hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

另一个回答

楼上大哥有点儿答非所问…  其实还是用overflow:hidden;就是了，但是你要限制行高跟容器的高度。然后限制容器的宽度既然你说了是要换行，那必然是写在<div><span><p>等一类标签里。 统一说一下：如果不是块元素（其实当内联元素（span、a）通过display:block;声明后它也可以转换为块元素！（div）），首先要加上display:block;然后限制行高（这里举个例子）：line-height: 24px;;其次容器高度hetght:50（这个数值取决于你的行高），然后宽度width:200px;  当然宽度是取决于你的需要。 然后如果想显示成两行那么就调节一个字体大小等等。 
一个简单代码实例：
body span{
 text-align: left;//左对齐
 text-indent: 2em;//首航缩进两个字符
 line-height: 24px;//行高
 display:block;
 height:50px;
 overflow:hidden;
 width:200px;
}
<span>
楼上大哥有点儿答非所问…  其实还是用overflow:hidden;就是了，但是你要限制行高跟容器的高度。然后限制容器的宽度既然你说了是要换行，那必然是写在<div><span><p>等一类标签里。 统一说一下：如果不是块元素，首先要加上display:block;然后限制行高（这里举个例子）：line-height: 24px;;其次容器高度hetght:50（这个数值取决于你的行高），然后宽度width:200px;  当然宽度是取决于你的需要。 然后如果想显示成两行那么就调节一个字体大小等等。 
</span>