Question

我正在列出最近的新闻。所以，它会显示如下：

- Take a look at the new Volks...
- John Doe is looking for a jo...
- Microsoft is launching the n...

因此，上面的列表只显示新闻标题，每篇新闻的长度限制为25个字符。但是，这效果不好......例如，如果你键入25 M，它会爆炸我的div。

我被告知有一种方法可以计算字符串的长度并使其自动适合div。

有谁知道怎么做？

谢谢！

Answer 1

“text-overflow：省略号”是你想要的，但不是每个人都支持它。 More info here...

Answer 2

我想你想用css来做这件事。

word-wrap:break-word;

应该这样做

Answer 3

防止“爆炸div”的一种非常简单的方法是使用css样式来设置div的overflow以滚动或隐藏额外的文本而不是拉伸以容纳它。

Answer 4

我认为您所说的是使用System.Drawing.Gaphics类的MeasureString()方法。

但是，这需要制作一个与您网页的字体特征相匹配的Graphics对象。但是，您的服务器进程不应该知道网页的样式元素，这应该由CSS表格处理。

Answer 5

我认为有一种简单的方法可以解决所有浏览器和字体的问题。最好的方法是确保如果有人进入25 * m，你的布局不会中断。

有用的事情是拆分超过X个字母的单词。我的自动换行css对所有浏览器都不起作用。

Answer 6

这实际上不是服务器端问题，因为服务器不应该知道人们使用什么字体。您可以使用Ajax执行此操作 - 将字体发布到服务器，计算宽度（如James Curran所述），并返回正确的字符串。但是，服务器可能安装了相同的字体，您必须在服务器端计算填充和边距。

我可以想到客户端的几个选项：

用跨度包裹每一行。跨度将自动扩展到线的宽度。使用jQuery或您喜欢的javascript，您可以删除字符，直到宽度正常。（你可以进行一种二分法搜索，在每个阶段都可以添加省略号并检查宽度）
简单 - 用固定宽度div包裹每一行并将其设置为overflow:hidden，并在div之后添加省略号。这会切断字母，当你得到一个简短的文字时，它仍会显示省略号。
太容易了 - 使用固定宽度的字体（它们大多是丑陋的）。

Answer 7

正如其他人所提到的，您可以使用System.Drawing.Graphics.MeasureString来测量胖客户端应用程序中的字符串，但是既然您提到要将其放入HTML div标签中，那么让浏览器使用CSS处理用户界面是可取的。

<html>
<head>
    <title>C# - How can I cut a string at its end to fit in a div? </title>
    <style type="text/css">
        .ellipsis li
        {
           display: block; 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 166px;
        }
    </style>
</head>
<body>
    <ul class="ellipsis">
        <li>Take a look at the new Volksxxxxx</li>
        <li>John Doe is looking for a joxxxxx</li>
        <li>Microsoft is launching the nxxxxx</li>
    </ul>
</body>
</html>

我使用了无序列表标记（UL）而不是div，因为您的样本列表以项目符号开头。类似的CSS将适用于DIV标签。虽然所有浏览器都可以剪辑内容，但并非所有浏览器都支持非标准文本溢出：省略号样式。

C＃ - 如何在一端剪切一个字符串以适合div？

7 个答案: