如果句子长度超过两行

Question

我有一个包含职位和职位的句子，我对写整个句子有两行限制。

该位置的最大长度为30个字符，但作业标题的最大长度未知。

为了实现它，我需要使作业标题更短（使用点点点）。

这些例子很好用：

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

但这些例子不起作用：

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

该作业应替换为“Sales Manager and ...”

通过这种方式，句子将恰好是两行。

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

该作业应替换为“Sales Manager ...”

通过这种方式，句子将恰好是两行。

这是我的css：

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}

这些是我最常见的（我在两个平台上创建了相同的代码）：

1）http://jsfiddle.net/Ht6Ym/3734/

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}

<div style="color:red;">It works:</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

<div>--------------------------</div>

<div style="color:red;">It doesn't work:</div>
<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

任何帮助表示赞赏！

Answer 1

如果您在范围text-overflow : ellipsis上设置.ellipsis属性，则需要设置此范围的宽度。
见这个例子：

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
  width:105px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid green;
}

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<div>----------------</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span><span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

Answer 2

修复

1. 在包裹职位的<span>上设置显式宽度。
2. 将display设置为inline-block以获得跨度。
3. 将vertical-align设置为top以获取范围...默认设置为baseline，在这种情况下，这不是您想要的。有关详细信息，请参阅this thread。

更多信息

为了使text-overflow: ellipsis按预期工作，您需要将文本溢出其容器。目前，<span>将使其宽度适应其中的任何文本，因此永远不会出现文本溢出元素的情况。

然而，简单地在跨度上设置宽度将不起作用，因为<span>元素默认为内联元素，没有宽度。通过在display: inline-block上设置<span>，元素内的内容将被视为block（可以有宽度），而元素本身仍为inline（ see here for more info on the display property）。

听起来你知道职称的最大长度应该是好的;如果涉及更多变量，您可能必须计算所需的宽度并在JavaScript中设置它。

实施例

我已经缩小了代码段以显示此操作。

＆＃13;
＆＃13;
.job-title {
  display: inline-block;
  vertical-align: top;
  width: 80px;
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}
＆＃13;
<div id="container">Find more <span class="job-title">Long professional title</span> jobs in <span class="location">San Francisco, California, USA.</span>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以为两个span元素创建一个类，并为其赋予display:inline并删除.ellipsis类的样式，就像我在下面所做的那样。

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.job {
  display: inline;
}

<div style="color:red;">It works:</div>

<div id="container">
  <span class="job">Find more</span>
  <span id="job" class="ellipsis job">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

<div>--------------------------</div>

<div style="color:red;">It doesn't work:</div>
<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>