Question

如何剪切字符串以适合div的宽度？

假设我有一个很长的字符串，比如"Anyone can help me to solve this problem"，可以放入80px宽的div。我想要的是剪切字符串以适应div的宽度，并在单词的末尾添加“...”，如"Anyone can help me..."

Answer 1

您可以尝试使用CSS使用省略号截断字符串，使用this one by Justin Maxwell等方法。

基本上，要使其跨浏览器工作，您必须使用标准CSS，特定于浏览器的CSS和某些XML的组合。完整的写入可以在上面的链接中读取，但最终产品是：

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

结合

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

然后使用CSS class =“ellipsis”

装饰你的div

Answer 2

我很确定不知道在哪里切弦。您可以使用JavaScript逐个删除字符，直到宽度<= 80px，然后追加...但我不推荐它。一种更好的方法是将你的字符串裁剪为你知道将超过80px的长度，然后将CSS overflow:hidden放在你的div上，并叠加你的......作为一个单独的元素并对齐div的右侧。它可能看起来有点偏，但我认为这是你能做的最好的。 Gmail就是这样的。他们将它裁剪为预定数量的字符，拍打...并隐藏任何仍然太长的字符。

剪切一个字符串以适合div的宽度，并在字符串的末尾添加三个点

2 个答案: