CSS - Hide a part of text

Asked

Viewed 4,785 times

5

Good,

I have a column in MYSQL called decryption. When I’m going to echo it, it appears in full text, what I wanted was just to show a part of the text and not everything.

How I do in css?

css

1 answer

1

For text boxes with more than one line and only with CSS you can do so.

In this option the "..." are inside 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 "..." 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>

Just remembering that the text-overflow: ellipsis; works only when you only have one line of text! For multiple lines it will not work...

#txt-ellipses {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000;
}
<div id="txt-ellipses">Este é um longo texto que não vai caber na caixa</div>

Browser other questions tagged css

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