我不知道为什么这个简单的CSS不起作用......
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>应该在4号"测试"周围切断
同
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
如果溢出,"......"将显示在行尾.但是,这只会在一行中显示.但我希望它以多行显示.
它可能看起来像:
+--------------------+
|abcde feg hij dkjd|
|dsji jdia js ajid s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
我的页面中包含省略号的动态数据.含义:
.my-class
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 71px;
}
并且我想添加具有相同内容的此元素工具提示(title ='$ {myData}')但我希望它仅在内容很长并且省略号出现在屏幕上时才会出现.
有什么办法吗？
一个方向 - 当浏览器(在我的情况下是IE)绘制省略号时 - 它会抛出一个关于它的事件吗？
我在页面上有一组块元素.它们都具有CSS规则white-space,overflow,text-overflow set,以便修剪溢出的文本并使用省略号.
但是,并非所有元素都溢出.
无论如何,我可以使用javascript来检测哪些元素溢出？
谢谢.
补充:我正在使用的示例HTML结构.
<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>
SPAN元素始终适合单元格,它们应用了省略号规则.我想检测省略号何时应用于SPAN的文本内容.
自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:
问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.
RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.
严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").
有没有人有这个可行的解决方案？
我有一个弹性布局的网页,如果调整浏览器窗口大小,它会改变其宽度.
在这种布局中,标题(h2)将具有可变长度(实际上是我无法控制的博客标题的头条新闻).目前 - 如果它们比窗户宽 - 它们分成两行.
是否有一个优雅的,经过测试的(跨浏览器)解决方案 - 例如使用jQuery - 缩短了标题标签的innerHTML,如果文本太宽而无法放入当前屏幕的一行,则会添加"..."容器宽度？
有没有解决方案在div中的最后一行添加省略号,流体高度(20%)？
我-webkit-line-clamp在CSS中找到了这个函数,但在我的例子中,行号将取决于窗口大小.
p {
width:100%;
height:20%;
background:red;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. …我有一些html表,文本数据太大,不适合.因此,它会垂直扩展单元格以适应这种情况.因此,现在具有溢出的行的高度是具有较少数据量的行的两倍.这是无法接受的.如何强制表具有相同的行高1em？
这是一些重现问题的标记.表应该只是一行的高度,隐藏溢出的文本.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { width:250px; }
table tr { height:1em; overflow:hidden; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a test.</td>
<td>Do you see what I mean?</td>
<td>I hate this overflow.</td>
</tr>
</table>
</body>
</html>
我正在尝试设置一个表的列宽,它可以正常工作,直到它到达子元素将被视觉截断的点...然后它将不会更小.("视觉截断" - 不适合似乎隐藏在下一列后面)
以下是一些示例代码来演示我的问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
var intervalID = null;
function btn_onClick()
{
// keep it simple, only click once
var btn = document.getElementById("btn");
btn.disabled = true;
// start shrinking
intervalID = window.setInterval( "shrinkLeftCell();", 100);
}
function shrinkLeftCell()
{
// get elements
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
// initialize for first pass
if( "undefined" == typeof( td1.originalWidth))
{
td1.originalWidth = td1.offsetWidth;
td1.currentShrinkCount = td1.offsetWidth;
}
// …我有一些动态的文本(来自我的数据库),我需要适合我的div.
我的div有一个固定的大小,但是当文本变得很长时会变成两行.如果文本很长,我想在末尾放三个点使其适合一行.
所以例如div变成了div
我尝试了几次尝试,但基本上所有尝试都依赖于以某种方式计算字符.这并不是真的很幸运,因为角色没有固定的宽度.例如,大写W比小i宽得多.
因此我在字符计数方法上遇到两个问题:
如果文本有许多狭窄的字符,它会被剪切并附加...,即使文本实际上也适合一行甚至是原始形式.
该文本包含许多宽字符,即使在将其切割为最大字符数并附加点后,它最终会出现两行.
这里是否有任何解决方案(JavaScript或css？)考虑文本的实际宽度,而不是字符数？
css ×9
html ×9
ellipsis ×6
css3 ×4
javascript ×4
html-table ×2
column-width ×1
layout ×1
overflow ×1
tooltip ×1