How to hide a text being bigger than my Div

Navigation
4

The purpose of the exercise is to study, I am creating a blog that has stories about dubbing and one of the objectives is to hide the text, which is much larger than my Div, so when clicking on the post the person is redirected to a page with the full story.

HTML code 

    <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>dublaBlog</title>
    <link rel="stylesheet" href="css/folhaDeEstilos.css">
</head>
<body>
    <header>
        <h1><span style="color: red">dubla</span>Blog</h1>
        <nav class="menuDaPagina">
            <ul class="listaMenu">
                <li class="itemMenu"><a href="">Home</a></li>
                <li class="itemMenu"><a href="">Anime</a></li>
                <li class="itemMenu"><a href="">Cartoons</a></li>
                <li class="itemMenu"><a href="">Filmes</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <section class="postagem">
            <h4>Entrevista com Wendel Bezerra</h4>
            <span style="color: red; font-size: 12px; display: block">Postado por Rafael Boeno</span>
            <figure>
                <img src="imagens/wendel-bezerra-goku-300.png">
                <figcaption>
                    <p>Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
                        risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
                        imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
                        etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
                        ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
                        ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
                        um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
                        varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
                        rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
                        rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
                        rhoncus lorem orc.
                        Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
                        risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
                        imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
                        etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
                        ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
                        ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
                        um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
                        varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
                        rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
                        rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
                        rhoncus lorem orc.
                    </p>
                </figcaption>
            </figure>
        </section>
    </article>
    <footer>

    </footer>
</body>
</html>

CSS3 Style Sheet 

body{
    background-color: #CCC5CD;
}

header{
    background-color: white;
    width: auto;
    height: 50px;
    margin: auto 200px;
    border-bottom:  1px solid;
}
a{
    text-decoration: none;
    color: inherit;
}


header h1{
    display: inline;
    position: absolute;
    margin-left: 20px;
    width: 141px;
    margin-top: 7px;
}

nav.menuDaPagina{
    float: right;
    position: relative;
}

ul.listaMenu{
    position: relative;
    list-style: none;
}

li.itemMenu{
    position: relative;
    display: inline-block;
    padding: 7px;
    margin-top: -15px;
    margin-right: 30px;
}

li:hover{
    background-color: red;
    color: white;
    padding: 15px;
}

article{
    margin: auto 200px;
    padding-top: 10px;
}


section.postagem{
    width: 600px;
    height: 275px;
    background-color: white;
    position: relative;
}

section h4{
    display: inline;
}

figure{
    margin: 0px;
}

figure img{
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

figcaption p{
    text-align: justify;
    overflow: inherit;
    text-overflow: ellipsis;
}
    
asked by anonymous 11.01.2018 / 19:14

3 answers

3

You can put ... at the end of the text using text-overflow: ellipsis; .

Example: 

div {
  width: 150px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</div>
    
11.01.2018 / 19:22
2

One solution is to change the styles of <figure> and section.postagem . Set in the first a overflow: hidden; and a height fixed; and in the second only a overflow: hidden; . This will delimit the inner content to the element area. What goes beyond this area will not be visible.

  

text-overflow: ellipsis; in this case does not work because the text   has multiple rows.

See it working: 

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>dublaBlog</title>
   <style>
body{
    background-color: #CCC5CD;
}

header{
    background-color: white;
    width: auto;
    height: 50px;
    margin: auto 200px;
    border-bottom:  1px solid;
}
a{
    text-decoration: none;
    color: inherit;
}


header h1{
    display: inline;
    position: absolute;
    margin-left: 20px;
    width: 141px;
    margin-top: 7px;
}

nav.menuDaPagina{
    float: right;
    position: relative;
}

ul.listaMenu{
    position: relative;
    list-style: none;
}

li.itemMenu{
    position: relative;
    display: inline-block;
    padding: 7px;
    margin-top: -15px;
    margin-right: 30px;
}

li:hover{
    background-color: red;
    color: white;
    padding: 15px;
}

article{
    margin: auto 200px;
    padding-top: 10px;
}


section.postagem{
    width: 600px;
    height: 275px;
    background-color: white;
    position: relative;
    display: block;
    overflow: hidden;
}

section h4{
    display: inline;
}

figure{
    margin: 0px;
    text-align: justify;
    overflow: hidden;
    height: 217px;
    display: inline-block;
}

figure img{
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

figcaption p{
   margin: 0;
}
   </style>
</head>
<body>
    <header>
        <h1><span style="color: red">dubla</span>Blog</h1>
        <nav class="menuDaPagina">
            <ul class="listaMenu">
                <li class="itemMenu"><a href="">Home</a></li>
                <li class="itemMenu"><a href="">Anime</a></li>
                <li class="itemMenu"><a href="">Cartoons</a></li>
                <li class="itemMenu"><a href="">Filmes</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <section class="postagem">
            <h4>Entrevista com Wendel Bezerra</h4>
            <span style="color: red; font-size: 12px; display: block">Postado por Rafael Boeno</span>
            <figure>
                <img width="200" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
                <figcaption>
                    <p>Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
                        risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
                        imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
                        etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
                        ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
                        ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
                        um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
                        varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
                        rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
                        rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
                        rhoncus lorem orc.
                        Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
                        risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
                        imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
                        etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
                        ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
                        ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
                        um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
                        varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
                        rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
                        rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
                        rhoncus lorem orc.
                    </p>
                </figcaption>
            </figure>
        </section>
    </article>
    <footer>

    </footer>
    <script>
    </script>
</body>
</html>
    
11.01.2018 / 20:19
1

Using text-overflow: ellipsis; and white-space: nowrap; will limit your text to just one line .

For multiple lines it will not work. If you want to dare the 3 dots in texts with more than one line, see how to do it.

Template with Ellipsis into the TextBox. (this option may depend on fine-tuning in Padding to stay to your liking and not cutting a character in the middle for example) 

/* Modelo da caixa de texto */
.block-with-text {
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height: 6em; /* aqui vc controla a altura da caixa de texto */
    text-align: justify;
}
.block-with-text:before {
    content: '...';
    position: absolute;
    right: 0px;
    bottom: 0;
    background-color: #ffffff;
    padding: 0 0px 0 0.25em;
}
<p class="block-with-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, veniam! Officiis assumenda iusto ad corrupti fuga nobis earum laborum alias quam rerum quae molestias ipsum soluta eveniet quos ut illo necessitatibus unde quidem consequatur dolorem, nemo minus! Fugiat, asperiores vel. Possimus rerum enim facilis aspernatur iure doloribus ut commodi cumque nam omnis porro quibusdam voluptatibus, alias eum! Hic modi provident assumenda mollitia sunt non culpa, sapiente est officia a, quis illum quos nesciunt. Enim aliquid eaque a adipisci ullam, minus dolor accusantium corrupti dolore soluta voluptate ipsa harum pariatur vel ut cupiditate dolorem velit ab ex ratione est assumenda ipsum!</p>

Option with Ellipsis out of text box. This will not cut character. 

html, body {
    width: 70%;
    height: 100%;
    margin: 0 auto;
}
/* Modelo da caixa de texto */
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 6em; /* aqui vc controla a altura da caixa de texto */
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
<p class="block-with-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, veniam! Officiis assumenda iusto ad corrupti fuga nobis earum laborum alias quam rerum quae molestias ipsum soluta eveniet quos ut illo necessitatibus unde quidem consequatur dolorem, nemo minus! Fugiat, asperiores vel. Possimus rerum enim facilis aspernatur iure doloribus ut commodi cumque nam omnis porro quibusdam voluptatibus, alias eum! Hic modi provident assumenda mollitia sunt non culpa, sapiente est officia a, quis illum quos nesciunt. Enim aliquid eaque a adipisci ullam, minus dolor accusantium corrupti dolore soluta voluptate ipsa harum pariatur vel ut cupiditate dolorem velit ab ex ratione est assumenda ipsum!</p>
    
12.01.2018 / 13:54
Breakpoint in visual studio does not load when debugging Enable select option with javascript / jquery