仅在 1 行上显示文本而不中断单词并以省略号结尾答案

【问题标题】：display text on only 1 line without breaking words and terminate with ellipses仅在 1 行上显示文本而不中断单词并以省略号结尾
【发布时间】：2020-03-09 01:49:27
【问题描述】：

编辑：如所指出的，将 省略号 更改为 省略号。共同的共识是我需要使用 js 来做同样的事情。谢谢你。

原始问题：我正在尝试显示一张仅显示一行描述的卡片，并用省略号终止该行。点击后，应该可以看到完整的描述。通过指定

，我只能显示 1 行

overflow:hidden; 
whitespace:nowrap;
text-overflow:ellipsis;

但它切断了最后一个词。有没有办法只显示一行而不断字？

这是我的 codepen 的链接：https://codepen.io/npnair/pen/BaNmXyM?editors=1100

这里是html：

<div class="search-card">
    <img class="search-card-img-left"
        src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
    <div class="search-card-body">
        <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
        <p class="search-desc"> President has full faith and confidence in his hand-picked AG- and something else to test the overflow property of the description.and something else to test the overflow property of the description. and something else to test the overflow property of the description.</p>
    </div>
</div>

这是css：

.search-card {
    width: 800px;
    background-color: lightgray;
    border: 1px solid #888888;
    border-radius: 0.25rem;
    height: 120px;
}

.search-card-img-left {
    padding:20px;
    height:80px;
    width: 80px;
    border:1px solid;
    float:left;
}
.search-card-title {
    margin: 0.25rem;
    border: 1px solid;
    text-align:left;
}

.search-card-body {
    text-align:left;
    display:inline;
}

.search-desc{
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    display:inline;
    word-break: keep-all;
}

【问题讨论】：

这能回答你的问题吗？ Limit text length to n lines using CSS
它切断了最后一个词......
安静晚了，我不知道你是否解决了你的问题以及如何，现在可以使用线夹，只有IE（不是Edge）基本不支持它：见caniuse.com/?search=line-clamp。如果您仍然关心这个问题，请在我的答案中添加一个 sn-p ;)

标签： javascript html css frontend

【解决方案1】：

您需要处理浮动元素并将其他元素保留为block 而不是inline 框。 overflow:hidden 和 white-space:nowrap 也是必需的。最后但首先，text-overflow:ellipses 不存在，但 text-overflow:ellipsis 存在。

您的代码已修复：

.search-card {
  width: 800px;
  background-color: lightgray;
  border: 1px solid #888888;
  border-radius: 0.25rem;
  height: 120px;
}

.search-card-img-left {
  padding: 20px;
  height: 80px;
  width: 80px;
  border: 1px solid;
  float: left;
}

.search-card-title {
  margin: 0.25rem;
  border: 1px solid;
  text-align: left;
}

.search-card-body {
  text-align: left;
  overflow: hidden;/* clears from float */
}

.search-desc {
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  white-space: nowrap;
  word-break: keep-all;
  width: 100%;
  overflow: hidden;
}

<div class="search-card">
  <img class="search-card-img-left" src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
  <div class="search-card-body">
    <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
    <p class="search-desc"> President has full faith and confidence in his hand-picked AG- and something else to test the overflow property of the description.and something else to test the overflow property of the description. and something else to test the overflow property
      of the description.</p>
  </div>
</div>

如果search-card-title也需要被截断，则添加到选择器中 search-desc : .search-desc, .search-card-title {/* ... text-overflow ... */}

另一种方法是使用line-clamp 属性，重新访问您的代码笔：

li {
    padding-bottom: 20px;
    list-style-type: none;
}

.close {
    float: right;
    font-size: 18px;
    background-color: lightgray;
    border: none;
}

.search-card {
    width: 800px;
    background-color: lightgray;
    border: 1px solid #888888;
    border-radius: 0.25rem;
}

.search-card-img-left {
    display: table-cell;
    
    padding: 20px;
    height: 80px;
    width: 80px;
    float: left;
}

.search-card-title {
    margin: 0.25rem;
    text-align: left;
}

.search-card-body {
    text-align: left;
    overflow: hidden; /* clears from float*/
}

.search-desc {
  /* added */
    display: -webkit-box;
  -webkit-box-orient: vertical;
    -webkit-line-clamp:1;

  /* kept */
    overflow: hidden;
}

p {
    padding: 0px;
    border: 1px;
}

<ul>
    <li>
        <div class="search-card">

            <img class="search-card-img-left" src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
            <div class="search-card-body">
                <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
                <p class="search-desc"> President has full faith and confidence in his hand-picked AG- and something else to test thednepgish overflow property of the description.and something else to test the overflow property of the description. and
                    something else to test the overflow property of the description.</p>
            </div>
        </div>
    </li>

    <li>
        <div class="search-card">
            <img class="search-card-img-left" src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
            <div class="search-card-body">
                <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
                <p class="search-desc"> President has full faith and confidence in his hand-picked AG- and something else to test
                    the overflow property of the description.and something else to test the overflow property of the description. and
                    something else to test the overflow property of the description.</p>
            </div>
        </div>
    </li>

    <li>
        expanded card
        <div class="search-card">
            <button class="close hidden-content">X</button>
            <img class="search-card-img-left" src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg">
            <div class="search-card-body">
                <h2 class="search-card-title"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>
                <p class="hidden-content">
                    <b>Author:</b> anonymous<br>
                    <b>Source:</b> whispers <br>
                    <b>Date: </b> in iso string
                </p>
                <p> President has full faith and confidence in his hand-picked AG- and something else to test the overflow property of the description.and something else to test the overflow property of the description. and something else to test the overflow property of the description.</p>
            </div>
        </div>
    </li>
</ul>

【讨论】：

它切断了单词的结尾以获得不同的描述（它在这个例子中偶然起作用，并且完美地在单词'overflow'的结尾切断了它）你能告诉我为什么我们将overflow:hidden 添加到容器和.search-card-desc？
@NamitaNair overflow:hidden to .search-card-body 用于从浮动 img 中清除它。这里有一个小提琴来展示添加/删除溢出会发生什么：hidden jsfiddle.net/fhyu1zka 和如果宽度：100% 涉及jsfiddle.net/fhyu1zka/1 对于被切断的单词，oups ，我不明白这样 CSS 无法做到你想要的方式只能选择一种方式来打破长词或不到 2线。对此感到抱歉。
@NamitaNair 我认为您应该更新您的问题/或使用有效的省略号创建一个新问题，并添加 javascript 标记以搜索完全看到的行上的最后一个单词。我在这里真的不回答。如果你也这么认为，我会删除我的答案。
@NamitaNair 添加了一个 line-clamp 示例，该行的最后一个单词不应该而是 troncated ;)

【解决方案2】：

在您的样式文件中为.truncate 类创建一个新样式，并将其添加到任何文本容器中

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

对于标题

<h2 class="search-card-title truncate"> Trump tells Bar he can stay - but makes clear that the tweets will continue </h2>

说明

只需添加这个truncate 类，它的作用与标题相同。

<p class="search-desc truncate">....</p>

您应该从 search-desc 类中删除 display:inline 属性。

【讨论】：