How to hide a text being bigger than my Div

Asked

Viewed 96 times

4

The purpose of the exercise is focused on study , I’m creating a blog that has articles on dubbing and one of the objectives is to hide the text, which is much bigger than my Div, so when clicking on the post the person is redirected to a page with the full article.

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;
}
javascript html5 css3

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>

  • I applied your code in my section I believe to be the right container to apply this code but the result was different from yours instead of appearing "..." he cut the text, you see that the same continues however the words are cut from the middle up it is complicated to explain without an image more by changing the size the height of the container solved the problem

  • This can happen even @Lucasalves, the interesting part of using Ellipsis is that it gets more elegant and intuitive.

2

One solution is to change the styles of <figure> and section.postagem. Set on the first one overflow: hidden; and a height fixed; and in the second only one overflow: hidden;. This will delimit the internal content to the widget area. What passes that area will not be visible.

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

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

1

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

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

Model with the Ellipsis into the Textbox. (this option may depend on fine tuning in the padding to suit your taste and not cut 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 the Ellipsis out of the text box. So 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>

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.