段落溢出，如文本溢出

本文介绍了段落溢出，如文本溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，我想知道CSS中是否有任何功能会导致段落溢出?
假设我有此段

Hi guys i would like to know is there any feature in css that will give a paragraph overflow?
Assuming i have this paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue purus quis nisi bibendum convallis vel non leo. Vivamus varius, lorem et gravida faucibus, mauris arcu laoreet metus, at eleifend neque eros eget erat. Sed sed lectus vel nibh suscipit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum tortor, interdum id sagittis eu, porta vitae mauris. Donec nec porttitor risus. Maecenas justo tellus, accumsan vitae lacinia non, rutrum dignissim leo. Vestibulum vestibulum erat a ipsum gravida auctor. Duis aliquet nisi nec tortor euismod tempus.

Quisque malesuada semper tempor. Etiam placerat rutrum erat, vitae euismod massa tempor quis. Ut ac massa nunc, eget dapibus metus.

现在，我想在此处应用文本溢出，就像我只希望它像这样

Now I want to apply a text-overflow here like i just want it to be like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue purus quis nisi bibendum convallis vel non leo. Vivamus varius, lorem et gravida faucibus, mauris arcu laoreet metus, at eleifend neque eros eget erat. Sed sed lectus vel nibh suscipit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...

所以基本上当段落文字超过70px的高度时.它将自动应用文本溢出:省略号，是否有任何CSS代码可以做到这一点?根据我的谷歌搜索，唯一可用的文本溢出是单行，因此省略号仅适用于单行段落，例如

So basically when the paragraph text exceed the height of let say 70px. It will automatically apply the text-overflow: ellipsis, is there any css code that can do this? based from my googling the only available text-overflow is a single line so the ellipsis only apply on single line paragraph like so

A single line paragraph that w...

但我希望它应用多行...这可能吗?假设我希望我的段落具有此CSS属性

But i want it to apply multiple lines... is it possible? assuming i want my paragraph to have this css property

.myParagraph{
  width: 150px;
  height: 75px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

}

所以我只希望当段落达到75px高度时才应用文本溢出省略号....我该怎么做?

so i want it only to apply the text-overflow ellipsis when the paragraph reach the 75px height.... how can i do this?

推荐答案

public static string Ellipsis(this string str, int maxLength)
{
  if (str.IsNullOrEmpty()) return str;

  if (offset != 0)
    maxLength -= offset;
  if (str.Length > maxLength)
    return str.Substring(0, maxLength > 2 ? maxLength - 2 : 0) + "...";
  else
    return str;
}

我用这样的东西来设置最大长度，在高度上不起作用，但是然后我就不愿意计算字体大小，行高等，并得出一个值，我每次都会追踪并在5秒内出错，每次希望它对您有帮助.

i use something like this it set max length, doesnt work on height but then i couldnt be bothered to calc the font size, line height etc etc and derive a value i just trail and error it in 5 seconds each time hope it helps you.

<html>

<style type="text/css">
    .ellipsis
    {
      line-height: 1.2em;
      height: 1.2em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      -o-text-overflow: ellipsis;
      -moz-binding: url(moz_fix2.xml#ellipsis);
    }

</style>
<div id="Content" style="width: 190px; border: 1px solid green">
	<div class="ellipsis">123456123456123456123456123456123456</div>
</div>
</html>

这篇关于段落溢出，如文本溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！