Html 仅在 div 内的两行内换行文本

Wrap a text within only two lines inside div

提问by Mady

I want to wrap a text within only two lines inside div of specific width. If text goes beyond the length of two lines then I want to show elipses. Is there a way to do that using CSS?

我想在特定宽度的 div 内仅两行内换行文本。如果文本超出两行的长度，那么我想显示省略号。有没有办法使用 CSS 做到这一点？

e.g.

例如

Sample text showing wrapping
of text in only two line...

Thanks

谢谢

回答by Hymanwanders

Limiting output to two lines of text is possible with CSS, if you set the line-heightand heightof the element, and set overflow:hidden;:

使用 CSS 可以将输出限制为两行文本，如果您设置元素的line-height和height，并设置overflow:hidden;：

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

--- jsFiddle 演示 ---

Alternatively, you can use the CSS text-overflowand white-spaceproperties to add ellipses, but this only appears to work for a single line.

或者，您可以使用 CSStext-overflow和white-space属性来添加省略号，但这似乎只适用于单行。

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

And a demo:

和一个演示：

--- jsFiddle DEMO ---

--- jsFiddle 演示 ---

Achieving both multiple lines of text and ellipses appears to be the realm of javascript.

实现多行文本和省略号似乎是 javascript 的领域。

回答by vinesh

Another simple and quick solution

另一个简单快捷的解决方案

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

The reference to the original question and answer is here

对原始问答的参考在这里

回答by Erik Philips

The best one I've seen which is CSS only and responsive comes from Mobify Developer Blog - CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS:

我见过的最好的只有 CSS 且响应式的文章来自Mobify 开发者博客 - CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS：

JS Fiddle Example

JS小提琴示例

CSS:

CSS：

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

Html:

网址：

<div class="ellipsis">
    <div class="blah">
        <p>Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>
    </div>
</div>

回答by Eric Tjossem

I believe the CSS-only solution text-overflow: ellipsisapplies to one line only, so you won't be able to go this route:

我相信仅 CSS 解决方案text-overflow: ellipsis仅适用于一行，因此您将无法走这条路：

.yourdiv {

    line-height: 1.5em; /* Sets line height to 1.5 times text size */
    height: 3em; /* Sets the div height to 2x line-height (3 times text size) */
    width: 100%; /* Use whatever width you want */
    white-space: normal; /* Wrap lines of text */
    overflow: hidden; /* Hide text that goes beyond the boundaries of the div */
    text-overflow: ellipsis; /* Ellipses (cross-browser) */
    -o-text-overflow: ellipsis; /* Ellipses (cross-browser) */
}

Have you tried http://tpgblog.com/threedots/for jQuery?

您是否尝试过http://tpgblog.com/threedots/的 jQuery？

回答by Ashish Singh

CSS only solution for Webkit

Webkit 的 CSS 唯一解决方案

// Only for DEMO
$(function() {

  $('#toggleWidth').on('click', function(e) {

    $('.multiLineLabel').toggleClass('maxWidth');

  });

})

.multiLineLabel {
  display: inline-block;
  box-sizing: border-box;
  white-space: pre-line;
  word-wrap: break-word;
}

.multiLineLabel .textMaxLine {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* Only for DEMO */

.multiLineLabel.maxWidth {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiLineLabel">
  <span class="textMaxLine">This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.</span>
</div>
<br/>
<button id="toggleWidth">Toggle Width</button>

回答by ArturoRomero

Typically a one-line truncate is quite simple

通常单行截断非常简单

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

Two line truncate is a little bit more tricky, but it can be done with css this example is in sass.

两行截断有点棘手，但它可以用 css 来完成，这个例子在 sass 中。

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
  overflow: hidden; /* hide text if it is more than $lineCount lines  */
  position: relative; /* for set '...' in absolute position */
  line-height: $lineHeight; /* use this value to count block height */
  max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
  padding-right: $padding-right; /* place for '...' */
  white-space: normal; /* overwrite any white-space styles */
  word-break: break-all; /* will break each letter in word */
  text-overflow: ellipsis; /* show ellipsis if text is broken */

  &::before {
    content: '...'; /* create the '...'' points in the end */
    position: absolute;
    right: $ellipsis-right;
    bottom: 0;
  }

  &::after {
    content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
    position: absolute;
    right: 0;
    width: $width;
    height: 1rem * $lineCount;
    margin-top: 0.2rem;
    background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
  }
}

回答by Alexander Cheprasov

Try something like this: http://jsfiddle.net/6jdj3pcL/1/

尝试这样的事情：http: //jsfiddle.net/6jdj3pcL/1/

<p>Here is a paragraph with a lot of text ...</p>

p {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    width: 300px;
}

p::before {
   content: '...';
   float: right;
   margin-top: 1.5em;
}

回答by Oriol

See http://jsfiddle.net/SWcCt/.

请参阅http://jsfiddle.net/SWcCt/。

Just set a line-heightthe half of height:

只需设置line-height一半height：

line-height:20px;
height:40px;

Of course, in order to make text-overflow: ellipsiswork you also need:

当然，为了text-overflow: ellipsis工作，你还需要：

overflow:hidden;
white-space: pre;

回答by Asiddeen bn Muhammad

CSS only

仅 CSS

    line-height: 1.5;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

回答by Krish

Use the below link for wrap into two lines check the link

使用下面的链接换行成两行检查链接

Insert ellipsis (...) into HTML tag if content too wide

如果内容太宽，则在 HTML 标签中插入省略号 (...)

That needs the below jquery

这需要下面的jquery

http://www.jeremymartin.name/projects.php?project=jTruncate

http://www.jeremymartin.name/projects.php?project=jTruncate