CSS溢出文本显示在几行中而没有断字 [英] Css overflow text displayed in few lines without word break

问题描述

我在div中显示了一些长文本，该div具有固定的宽度和高度.我希望将文本显示在几行上(作为div高度)，并且句子中的单词不会中断(一行中的单词前缀，然后在下一行中继续)，而且我想在该行的末尾添加省略号最后一句话.

CSS:

  white-space:nowrap;溢出:隐藏；文字溢出:省略号； 

但是即使div包含几行，这也会在一行中显示文本.

第二个选项:

 自动换行:断行； 

这与单词的第一个中断不同，句子以几行显示-这是不好的，因为单词在中间中断并且在句子的末尾没有省略号(...)

我如何实现以下目标:

1)几句话作为div高度

2)没有分词

3)在末尾显示省略号(最后一行包含省略号)

附加的jsfiddle: https://jsfiddle.net/vghup5jf/1/如您所见，仅显示一行

解决方案

省略号不适用于多行，纯CSS无法实现.以下是适用于chrome和Safari( -webkit 呈现引擎)的技巧.

  .ellipsis {显示:块；显示:-webkit-box;最大宽度:400像素；max-height:100像素；font-size:20px;行高:1.4；-webkit-line-clamp:3;-webkit-box-orient:垂直;溢出:隐藏；文字溢出:省略号；}  

 < div class =省略号">< span>我有一个长文本在div中显示，此div具有固定的宽度和高度，我希望文本以几行显示(作为div的高度)，并且句子中的单词不会中断(单词前缀在一行中，此外，我想在最后一句的末尾添加省略号.</span></div>  

出于兼容性考虑，您应该使用SASS或javascript.

使用JS

https://css-tricks.com/line-clampin/

使用CSS-SASS

http://codepen.io/martinwolf/pen/qlFdp

I have some long text that is displayed within a div this div has a fixed width and height. I want the text to be displayed on a few lines (as the div height) and that the sentence words will not break (word prefix in one line and the continue in the next line) furthermore I want to add ellipsis at the end of the last sentence.

CSS:

white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

but this displays the text in one line even though the div contains a few lines.

Second option:

word-wrap: break-word;

this unlike the first break the word and the sentence is displayed in a few lines - this is no good since the words are breaking in the middle and at the end of the sentence there is no ellipsis (...)

How can i achieve the following:

1) Few sentences as the div height

2) No word break

3) At the end ellipsis is displayed ( last line contains ellipsis)

attached jsfiddle: https://jsfiddle.net/vghup5jf/1/ as you can see only one line is displayed

解决方案

ellipsis wont work for multiple line and its not possible with pure CSS. Below is the trick which works on chrome and Safari (-webkit rendering engines).

.ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    max-height: 100px;
    font-size: 20px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="ellipsis">
     <span>
       I have a long text that display in div this div has a fixed width and height, I want the text will be displayed in a few lines (as the div height) and that the sentence words will not break(word prefix in one line and the continue in the next line) furthermore I want to add ellipsis at the end of the last sentence.
      </span>
</div>

for cross compatibility you should use SASS or javascript.

Using JS

https://css-tricks.com/line-clampin/

Using CSS-SASS

http://codepen.io/martinwolf/pen/qlFdp

这篇关于CSS溢出文本显示在几行中而没有断字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！