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

user_12057943 0
Viewed 1094

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;
}
frontend css html javascript
2 Answers

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>

user_24420990

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.

user_80760840
Related