Question

基本上，我想用一些描述性文本填充div，这些文本可能比div宽度和高度可以处理的更短或更长。

我想要做的是尽可能地填充div，如果文本对于div来说太多了，我想在末尾添加一个HTML …来指示那里有更多的内容而不是可见的

到目前为止，我一直在使用反复试验来确定div中可以容纳多少个字符，然后使用Left()将字符串剪切为该大小减去3个字符，这样就有足够的空间来最后添加…。

基本上，尽管有足够的空间可以轻松地将它切断，但是它的效果并不是很好，即使有足够的空间可以容纳它。有没有更好的方法来做到这一点？我无法想象无论如何都要用数学方法计算出div中可以容纳多少个字符？

Answer 1

您可以使用css的text-overflow: ellipsis属性来处理溢出的文本。

这是小提琴：http://jsfiddle.net/fy1qa6o8/

替代答案：

这是多线文本溢出的css解决方案。
小提琴： http://jsfiddle.net/97crm7nt/1/

Answer 2

关于Cold Fusion功能，Regex实际上可以做很简单的工作（我不是说它是你需要采取的方法，但可能有这样的情况＆＃ 39;一种有用的方法。我在图像生成中使用它。

<cfscript>
  function RELeft(string rstring,numeric num,numeric mnum = 0) {
    if (len(arguments.rstring) lte num) {
      return rstring;
    } else {
      var match = ReMatch("^(.{#arguments.mnum#,#arguments.num#}(?=\s|$)|.{#arguments.mnum#,#arguments.num#}(?=\b|))",arguments.rstring);
      return match[1];
    }
  }
</cfscript>
<cfset teststring = "this sentenc!- C.I.A. has more than 15 characters, but I only want the first 15, without breaki/ng at a word." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15)# -<br><br></cfoutput>
<cfset teststring = "Shortness." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15)#<br><br></cfoutput>
<cfset teststring = "a.b.c.d.e.f.g.h.i.j.k.l.m.n" />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15,15)#<br><br></cfoutput>
<cfset teststring = "myspacebarcalledinsick" />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15,13)#<br><br></cfoutput>
<cfset teststring = "a supercalifragilisticexpialidocious day." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft: #RELeft(teststring,15)#<br><br></cfoutput>
<cfset teststring = "a supercalifragilisticexpialidocious day." />
<cfoutput>#teststring#<br>Left: #Left(teststring,15)#<br>RELeft(min 4): `#RELeft("teststring",15,4)#`<br><br></cfoutput>

事实上，有些人可能希望使用\b（正则表达式边界）来执行此操作。我选择不这样做，因为.是一个单词边界，你可能会被F.B.I.这样的缩写绊倒。我的函数只会在一段时间匹配，如果绝对必须，比如像a.b.c.d.e.f.g.h.i.j.k.m.n.o.p ..

这样的字符串

它还提供了第三个参数，用于在找到第一个空格之前设置最小字符数。您可以在后两个示例中看到差异。

如何使用除最后三个字符之外的文本填充div

2 个答案: