求助！css text-overflow的使用!!!

dingzhanxing 2013-08-08 05:58:27

我想用
text-overflow:ellipsis
overflow:hidden

组合将超出的字符串截断，并且显示...

但是我想要的是显示出字符串右边的不分，并且...在左侧

我试了加上direction:rtl
的属性还是不行，哪位大侠有好办法

...全文

206 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

dingzhanxing 2013-08-09

打赏
举报

现在就是想用 css 属性来实现: text-overflow:ellipsis overflow:hidden 上面这两个再配合其他的属性？或者是有其他直接可用的属性呢？

一天要饭生活又开始啦 2013-08-09

打赏
举报

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div>
    <div style='float:left; width:50px;'>......</div><p style='text-indent:-254px; margin-left:50px; overflow:hidden;'>来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了</p>
</div> 
</body>
</html>

一天要饭生活又开始啦 2013-08-09

打赏
举报

<div> ......<span style='text-indent:-250px;'>来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了来了</span> </div>

地狱羔羊 2013-08-09

打赏
举报

自己写脚本..样式解决不了 direction:rtl;是把整段字反过来..隐藏的还是结束的那一部分.

tony4geek 2013-08-09

打赏
举报

楼上的说了。left:-666px, 根据大小调整位置。

dingzhanxing 2013-08-09

打赏
举报

对啊就是讲字符串左侧隐藏了，然后再左侧加上...然后右侧的部分留着。

街头小贩 2013-08-08

打赏
举报


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<span style="background-color:#f00;">
[L]但是我想要的是显示出字符串右边的不分，并且...在左侧但是我想要的是显示出字符串右边的不分，并且...在左侧[R]
</span>

<hr/>

<div style="width:200px;height:30px;line-height:30px;overflow:hidden;background-color:#ddd;position:relative;">
<span style="display:inline-block;background-color:#f00;position:absolute;top:0;left:-666px">
[L]但是我想要的是显示出字符串右边的不分，并且...在左侧但是我想要的是显示出字符串右边的不分，并且...在左侧[R]
</span>
</div>
</body>
</html>

街头小贩 2013-08-08