如何使用 CSS 将长文本指示到较小的固定列中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2108740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I indicate long text into a smaller fixed column with CSS?
提问by Primoz Rome
How do I fit long text into a fixed width column where I have room for only one line of text? The text needs to be cut to a fixed width (lets say to 100px)and I would like to add dots "..." at the end. Something like this for example:
如何将长文本放入固定宽度的列中，而我只有一行文本的空间？文本需要剪切到固定宽度（比如 100 像素），我想在末尾添加点“...”。例如这样的事情：
Given string:
给定字符串：
Some really long string that I need to fit in there!
Desired output in fixed-width-column should be:
固定宽度列中的所需输出应为：
Some really long string...
回答by Gordon
You can do this with CSS alone:
你可以单独使用 CSS 来做到这一点：
.box {
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don't show excess chars */
white-space:nowrap; /* force single line */
width: 300px; /* fixed width */
}
Note: You will want to check on the latest browser support.
注意：您需要检查最新的浏览器支持。
回答by pierre delaunay
Just with some CSS like answer of Gordon. Just added the display:blockproperty for an inline element like <a>or <p>:
只需使用一些 CSS，例如 Gordon 的回答。刚刚display:block为内联元素添加了属性，例如<a>or <p>：
a#myText{
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 300px;
}
You could use it with many browser like you can see on this link : http://caniuse.com/#search=text-overflow
您可以在许多浏览器中使用它，就像您在此链接上看到的那样：http: //caniuse.com/#search=text-overflow
回答by Ben Everard
I had a similar problem, the way I solved it was to strip the string down to 60 characters and append an '...' to the end of it.
我有一个类似的问题，我解决它的方法是将字符串减少到 60 个字符并在它的末尾附加一个 '...'。
An ugly solution? Yes, but unless there is a jQuery solution it's probably your best bet.
一个丑陋的解决方案？是的，但除非有 jQuery 解决方案，否则它可能是您最好的选择。
If you're using Smarty, this is how I solved the problem:
如果您使用的是 Smarty，这就是我解决问题的方法：
{$my_string|truncate:60}
回答by David Heggie
Here's a function I use to truncate strings. Like most of the suggestions here, it uses substr to truncate the string, but it will avoid splitting the string mid-word:
这是我用来截断字符串的函数。像这里的大多数建议一样，它使用 substr 来截断字符串，但它会避免拆分字符串中间词：
function truncate_text($string, $min_chars, $append = ' …') {
$chars = strpos($string, " ", $min_chars);
$truncated_string = substr($string, 0, $chars) . $append;
return $truncated_rstring;
}
回答by Crozin
I think simple cutting text after N characters isn't what you're looking for. It's not a solution because the following text have both 15 character length: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - notice that the second "word" is about three times longer than the first one.
我认为在 N 个字符后简单剪切文本不是您想要的。这不是解决方案，因为以下文本的长度均为 15 个字符：iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - 请注意，第二个“单词”大约是第一个的三倍。
JavaScript might be a solution:
JavaScript 可能是一个解决方案：
First prepare your mark-up:
<p id="abc">{TEXT}</p>Where
{TEXT}is your text truncated to 150 characters +...Now when we've got a good base for JavaScript we can try to make what you're looking for:
<html> <head> <style type="text/css"> #abc { width: 100px; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var ref = document.getElementById("abc"); var text = ref.text; ref.removeChild(ref.firstChild); ref.appendChild(document.createTextNode("...")); var maxHeight = ref.offsetHeight; var pos = 0; while (ref.offsetHeight <= maxHeight) { var insert = text.substring(0, ++pos) + "..."; var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); } ref.replaceChild(finalReplace, ref.firstChild); }, false); </script> </head> <body> <p id="abc">My very, very, very, very, very, very, very long text...</p> </body> </html>
首先准备你的标记：
<p id="abc">{TEXT}</p>{TEXT}您的文本在哪里被截断为 150 个字符 +...现在，当我们为 JavaScript 打下了良好的基础后，我们可以尝试制作您正在寻找的内容：
<html> <head> <style type="text/css"> #abc { width: 100px; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var ref = document.getElementById("abc"); var text = ref.text; ref.removeChild(ref.firstChild); ref.appendChild(document.createTextNode("...")); var maxHeight = ref.offsetHeight; var pos = 0; while (ref.offsetHeight <= maxHeight) { var insert = text.substring(0, ++pos) + "..."; var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); } ref.replaceChild(finalReplace, ref.firstChild); }, false); </script> </head> <body> <p id="abc">My very, very, very, very, very, very, very long text...</p> </body> </html>
