display text on only 1 line without breaking words and terminate with ellipses

Question

EDITS: Changed the ellipses to ellipsis as pointed out. And the common consensus is that I will need to use js for the same. Thank you.

ORIGINAL QUESTION: I am trying to display a card that shows only one line of the description, and terminates the line with ellipses. On clicking, the entire description should be available. I have been able to display only 1 line by specifying

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

but it cuts off the last word. Is there a way to display only one line without breaking the word?

Here is a link to my codepen: https://codepen.io/npnair/pen/BaNmXyM?editors=1100

Here is the 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>

Here is the 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;
}

Does this answer your question? [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — Obsidian Age, Mar 09 '20 at 01:53
quiet late, i do not know if you solved your issue and how, nowdays line-clamp can be used, only IE (not Edge) won't support it basicly: see https://caniuse.com/?search=line-clamp . Added a snippet in my answer if you still care about that question ;) — G-Cyrillus, Jun 30 '21 at 12:55

G-Cyrillus · Answer 1 · 2021-06-30T12:52:42.833

you need to deal with floating element and keep other elements as block not inline boxes. overflow:hidden and white-space:nowrap is also required. and last but first, text-overflow:ellipses do not exist but text-overflow:ellipsis does.

your code fixed :

.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>

if search-card-title also needs to be cut off, then add it to the selector search-desc : .search-desc, .search-card-title {/* ... text-overflow ... */}

another way is to use the line-clamp property, your codepen revisited:

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>

it cuts off the end of the word for a different description (it worked by chance for this example, and cut it off at the end of the word 'overflow' perfectly) Can you tell me why we add ```overflow:hidden``` to both the container and the .search-card-desc? — Namita Nair, Mar 09 '20 at 02:58
@NamitaNair overflow:hidden to .search-card-body is used to clear it from the floatting img.. here is a fiddle to show what happens adding / removing overflow:hidden https://jsfiddle.net/fhyu1zka/ and if width:100% is involved https://jsfiddle.net/fhyu1zka/1/ For the word being cut off, oups , i did not understood it this way CSS is unable to do that the way you want it can only select a way to break a long word or not onto 2 lines. Sorry about that. — G-Cyrillus, Mar 09 '20 at 09:22
@NamitaNair I think you should update your question / or make a new one with a working ellipsis and add the javascript tag to search for the last word on the line entirely seen. I do not really answer here. i'll delete my answer if you think so too. — G-Cyrillus, Mar 09 '20 at 09:29
@NamitaNair added a line-clamp example, last word on the line should not but troncated ;) — G-Cyrillus, Jun 30 '21 at 12:56

Suman Biswas · Answer 2 · 2020-03-09T02:19:38.490

Make a new style for .truncate class in your style file, And add it any text container

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

For Title

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

For Description

Just add this truncate class, It will work the same as the title.

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

You should remove display:inline property from search-desc class.

display text on only 1 line without breaking words and terminate with ellipses

2 Answers2

For Title

For Description