5

Boas,

Eu tenho uma coluna no MYSQL chamada descrisão. Quando vou fazer echo dela, aparece em texto completo, o que eu queria era apenas mostrar uma parte do texto e não tudo.

Como faço em css?

1

1 Resposta 1

2

Para caixas de texto com mais de uma linha e só com CSS você pode fazer dessas formas.

Nessa opção os "..." ficam para dentro do TextBox. (essa opção pode depender de ajuste fino no Padding para ficar ao seu gosto e não cortar um caractere no meio por exemplo)

/* 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>

Opção com os "..." para fora da caixa do texto. Assim não vai cortar caractere.

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>


Apenas lembrando que o text-overflow: ellipsis; funciona apena quando vc só tem uma linha de texto! Para múltiplas linhas ele não vai funcionar...

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .