相关疑难解决方法(0)

让我们说我们有一个 <div style="width:100px;">This text is too long to fit</div>

div中的文本是动态的.而且我想强制文字适应宽度而不是破坏.所以我需要一些功能来测试文本是否适合,如果不适合,那么我想显示实际适合的文本部分.并追加...到最后.

文本太长的结果应该是这样的: "This text is..."

做一些我想要的标准方法吗？通过javascript,jquery,jsp或java？

谢谢!

编辑:感谢您的快速和许多答案!我在java中通过猜测适合多少个字符来做这个.这似乎不是最佳解决方案,所以这就是我来到这里的原因.

css解决方案对我来说非常完美.它不是那么大的交易,它不适用于Firefox,因为我的客户都使用ie无论如何.:)

这是一个很长的镜头,但是有没有人知道根据其内容估算和分类文本宽度(对于可变宽度字体)的算法？

例如,我想知道iiiiiiii并不像abcdefgh那么宽,而abcdefgh又不像WWWWWWWW那么宽,即使所有三个字符串的长度都是八个字符.

这实际上是尝试将一些智能构建到字符串截断方法中,该方法目前正在截断视觉上宽的字符串,但也不必要地截断视觉上狭窄的字符串,因为两个字符串包含相同数量的字符.算法可能足以将输入字符串分类为窄,正常或宽,然后根据需要截断.

这个问题并不是特定于语言,但如果有算法,那么我将用Java实现它.这适用于Web应用程序.我知道SO上有答案可以解决这个问题,使用JavaScript来获取包含div元素的宽度,但我想知道服务器端解决方案是否可行.

可能重复:
是否可以使用javascript或css实现overflow:省略号的效果？
如何使用CSS将长文本指定到较小的固定列中？

我希望修剪文本,如果它大于300px宽,带"......"

例如,如果我有:

<ul>
<li>this is greater than 300px, than only display as much of the text that is 300px wide and then replace the remaining text with "..."</li>
<li>short, don't trim</li>
</ul>

将显示为:

this is greater than 300px, than only ...
short, don't trim
|----------- 300px wide ----------------|

我如何用CSS/HTML做到这一点？

我有一个带有多行段落的DIV.

有没有办法(也许使用jQuery)只显示段落的第一行并隐藏其他段落？

我用过这个

p.test {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

但它不适用于Firefox.我没有检查其他浏览器.

但我需要跨浏览器兼容

我刚刚开始研究jquery移动应用程序,并且在使用链接时遇到标题栏问题.

  <header data-role="header" data-position="fixed">
    <a href="blah" data-icon="back">this is long text</a>
    <h1>page title</h1>
  </header>

问题是,如果它们中的任何一个或两个都有点长,则后向链接经常与标题重叠.这显然只发生在具有较小屏幕(与iPad相比)的移动设备上的视图或当我缩小测试浏览器时.但是在更广泛的浏览器上测试它看起来不错.有没有内置的jquery方法来使这项工作？通过缩小文本大小或根据宽度自动截断文本？我可以自己截断文本,但是当在更广泛的浏览器(或横向模式)中查看时它看起来很傻,并且链接被无缘无故地截断.

任何帮助都会很棒.谢谢!

更新:

您可以访问http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.html进行测试

使用firebug/inspector使任何工具栏链接中的文本更长,并在浏览器宽度较小时观察它们与标题重叠.

我很想知道它出现在屏幕上的字符串有多长.我们没有使用固定宽度的字体,所以:

"Our mother's tummy makes dummy noises."

远远超过:

"Lilly Leadbetter lives life leisurely."

有没有办法告诉人物有多长时间？我不需要像素完美的精确度,只需要在大致正确的位置椭圆就足够长.CSS溢出无济于事,因为在CSS确定了多长时间之后我无法附加椭圆.

HTML是否支持文本呈现的行为,其中自动放置"..."将避免多行？对不起,我找不到与此行为相关的样式/标签,如果它存在!

我需要在具有明确宽度/高度的框中显示一些文本.如果文本内容超过了框的高度,我希望被截断,最好是省略号.

我尝试过使用overflow: hidden,像这样:

<div style="width: 500px; height: 50px; 
     overflow: hidden; 
     border: 1px solid black;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut sem orci. Sed laoreet, diam sed porttitor rhoncus, erat ante volutpat metus, dignissim laoreet lacus dolor a nisi. Fusce elit libero, interdum vel cursus tincidunt, vulputate quis lorem. In accumsan pharetra mauris, id vulputate sapien condimentum in. Etiam quis laoreet lectus
</div>

但这通常导致一行文本部分可见,如下所示:

我想过计算字符并手动截断文本,但是当字体成比例时,这无济于事.