Question

下面的子div的Css

  width: 65%;
  display: inline-block;
  margin: 15px 20px;
  font-size: 28px;
  font-weight: bold;
  line-height: 29px;
  max-height: 89px;
  min-height: 89px;
  overflow: hidden;
  text-overflow: ellipsis;

因此，当我有文本输出时，div文本正在获取剪辑但不能看到省略号（即＆＃34; ...＆＃34;）

JSFiddle

我想要省略号以便＆＃34; ...＆＃34;如果文本在div之外，则进入最后一行

Answer 1

你忘记了主要规则：

white-space: nowrap;

小提琴：http://jsfiddle.net/o411kdbg/1/

多行

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

p {
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 109.2px;
  /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<p>Pages that you view in incognito tabs won’t stick around in your browser’s history, cookie store or search history after you’ve closed all of your incognito tabs. Any files that you download or bookmarks that you create will be kept.</p>

＆＃13;

css中的省略号（＆＃34; ...＆＃34;）未显示

1 个答案: