简而言之,我有一个字段,其中最右边的数字是最重要的.(当然,这个领域来自我们的附属公司的系统,基于他们的主键,所以最左边的数字每个时期只改变一次!)
每个人都知道CSS提供了一个右截断"text-overflow:ellipsis;".如何(没有向服务器添加代码以通过字符串手术准备该字段)我们是否截断LEFT上的字段,并将"..."elipses放在LEFT上?
(CSS3没问题.)
我试图通过跨度实现这一目标:

这就是我所拥有的:
<span>some text goes here</span>
span{width:50px;overflow:hidden;float:left;}
Run Code Online (Sandbox Code Playgroud)
这给了我这个:

我尽可能地想到了所有可能的方式但是文本一直向下移动.我不想指定高度.
考虑一下这个html/css片段:
.l { text-align: left; }
.r { text-align: right; }
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}Run Code Online (Sandbox Code Playgroud)
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>Run Code Online (Sandbox Code Playgroud)
它显示了两个固定宽度的容器,其中一些文本太长而无法容纳,溢出设置为显示省略号以显示某些文本被隐藏.第一个容器左对齐,第二个容器右对齐.
结果显示两个示例的省略号都在右侧.
但是,对于第二个合适的人,我想实现这个目标:
...4555666777888999
Run Code Online (Sandbox Code Playgroud)
代替
1112223334445556...
Run Code Online (Sandbox Code Playgroud)
这可能吗?
我有一个里面有文字的 div。如果文本溢出它的 div,它会在末尾用省略号缩短。我想要做的是在椭圆后添加双引号,使其看起来像这样:
“快哥……”
这是我的代码:
<html><body>
<div style="width: 100px;background: #CCCCCC;">
<div style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">"The quick brown fox"
</div></div>
</body></html>
Run Code Online (Sandbox Code Playgroud)
是否有一种简单的方法/技术可以做到这一点,或者您是否需要创建自己的自定义省略号?
谢谢大家!
我有一些文件路径,我试图使用下面的代码在左侧显示省略号.
.ellipsis:after {
content:"..........................";
background-color: white;
color: transparent;
position: relative;
z-index: 2;
}
.ellipsis {
direction: rtl;
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
position: relative;
border: 1px solid black;
z-index: 3;
}
.ellipsis:before {
content:"...";
background-color: white;
position: absolute;
left: 0;
z-index: 1;
}Run Code Online (Sandbox Code Playgroud)
<span class="ellipsis">C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>Run Code Online (Sandbox Code Playgroud)
现在,如果我将一个特殊字符(如Slash /字符)添加到HTML中字符串的开头,它将显示在结果内容的末尾.
有人可以解释这里有什么问题吗?