Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo30

Ajuda para inserir um código de hifens no css

Recommended Posts


Olá bom dia,E uso um aplicativo que trabalha com css e queria se possível colocar um código de hifens no texto, quem gosta de ler vai entender que mesmo  tendo  a justificação fica com aqueles longos espaço em branco.na realidade estes são temas em que o aplicativo permite  que os usuários faca alterações ao seu gosto.


Vou mandar o código e a tela de leitura para ver se os amigos conseguem me ajudar


.altbookname{display:none;} .footer a{color:#afdea4;Verlag Bold;letter-spacing:0; padding:5 0 5 0;margin: 0 0 100 0; width: 33.3%;text-decoration:none; text-align:center;text-transform:uppercase; font-style:normal;border-radius:25px;box-shadow: 0px 0px 7px #fff;} body{color:#e1e1e1;background-color:#122641;text-align:justify;font-family:'Liberation Serif';padding:0 5 0 5;margin:0;} a{color:#e67e00;text-decoration:none;text-weight:bold} h1,h1 a{color:#ffffff;text-align:center;padding:0;margin:0;text-transform:uppercase;text-decoration:none;font-style:normal;font-family:'Cardo';} h2{color:orange;padding:8 0 3 0; margin:0;text-align:center; font-weight:bold;text-decoration:none;font-style:normal;} h3{color:#66f} h4{color:#c33} h5{color:#0c0} h6{color:#c0c} strong.searchkey{background-color:#557777}/*Search Highlight*/ .searchlink{color:#aaf;font-weight:bold} .verno{color:#e67a00;padding:0 2 0 2; margin:0 2 0 0;font-weight:bold;font-family:'Share';text-decoration:underline;} .strong{color:#c2e366;text-decoration:none;font-weight:normal;font-size:0.75em;font-family:'Raleway Medium';font-style:normal;} .morph{color:#0c6} .ref{color:#e67e00;text-decoration:none;} .red{color:#e8c71f} .xref{color:#e67e00;font-size:0.3em;font-weight:normal;text-decoration:none;font-style:italic;padding:0 0 0 3;border-color:#fff;border-width:0 0 0 1px;border-style: solid} .abbr{color:#fff} .h1{background-color:#552233;} .h2{background-color:#554422;} .h3{background-color:#555511;} .h4{background-color:#445511;} .h5{background-color:#335533;} .h6{background-color:#335555;} .h7{background-color:#334455;} .h8{background-color:#443355;} .h9{background-color:#412255;} .h10{background-color:#552255;} .current{background-color;#fff;border-radius:5px;box-shadow: 0px 0px 8px #fff;} .orange{color:#e67e00;} .brown{color:#ae5819;} .yellowgreen{color:#80a829;} .green{color:#00a300;} .bluegreen{color:#3a9e9e;} .blue{color:#abcdef;} .violet{color:#9a00dc;} .purple{color:#c700c7;} .pink{color:#ff1493;} .gray{color:#808080;} .tag{color:#fff;background-color:#4e4e4e;font-size:0.8em;text-align:justify;border-radius:5px;box-shadow: 2px 2px 10px #fff, 0px 0px 2px #fff;border-color:#4E4E4E;margin:10 40 10 40;padding: 3 5 3 5;} .tag a{color:orange;} .tag h1{color:#abcdef;font-size:16px;padding:0;margin:0;position:relative;text-align:center; text-decoration:underline;font-weight:bold;text-transform:none;text-transform:uppercase;} .tag h2{text-align:left;font-size:14px;font-weight:bold} a img.icon{border-color:#e39f51;} .parallel,.parallel td,.parallel th{border-style:solid;border-width:1px;border-color:#7f7f7f} .phead{background-color:#505050} .trans{color:#f33;} .eng{color:#808080;} .splitactive{color:#000000;background-color:#609960}.splitinactive{color:#c0c0c0;background-color:#000000} .ot{}#content{padding:1px 8px}body{margin:0} .hebrew{color:#11e02d;} .greek{color:#11e02d;} @font-face { 
  font-family: 'Liberation Serif'; 
  src: url('file:///storage/extSdCard/Android/data/com.riversoft.android.mysword/files/fonts/LiberationSerif-Regular.ttf'); 

@font-face { 
  font-family: 'Liberation Serif'; 
  font-weight: bold; 
  src: url('file:///storage/extSdCard/Android/data/com.riversoft.android.mysword/files/fonts/LiberationSerif-Bold.ttf'); 

@font-face { 
  font-family: 'Liberation Serif'; 
  font-style: italic; 
  src: url('file:///storage/extSdCard/Android/data/com.riversoft.android.mysword/files/fonts/LiberationSerif-Italic.ttf'); 

@font-face { 
  font-family: 'Liberation Serif'; 
  font-weight: bold; 
  font-style: italic; 
  src: url('file:///storage/extSdCard/Android/data/com.riversoft.android.mysword/files/fonts/LiberationSerif-BoldItalic.ttf'); 

@font-face { 
  font-family: 'Share'; 
  src: url('file:///storage/extSdCard/Android/data/com.riversoft.android.mysword/files/fonts/Share-Regular.ttf'); 

@font-face { 
  font-family: 'Share'; 
  font-weight: bold; 
  src: url('file:///storage/extSdCard/Android/data/com.riversoft.android.mysword/files/fonts/Share-Bold.ttf'); 

@font-face { 
  font-family: 'Share'; 
  font-style: italic; 
  src: url('file://

photo_2018-02-19_08-52-38.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia Rodrigo,

 

Pelo que entendi você precisa hifenizar automaticamente o texto via css. Tenho duas notícias para você, uma boa e uma ruim.

 

A boa é que existe sim uma propriedade css que faça isso: :tongue:

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

 

A notícia ruim (e até inusitada) é que ela funciona bem no FF e IE, mas no chrome ela não está funcionando (pelo menos na minha versão não) :persevere:

 

Nesse link aqui você consegue saber mais sobre a compatibilidade e até mesmo testar a propriedade abrindo essa página nos diversos navegadores: https://css-tricks.com/almanac/properties/h/hyphenate/

 

Como no seu caso é um app e ele deverá rodar sobre o motor webkit, creio que você terá que partir para a solução js mesmo. no link acima eles falam sobre o Hyphenator.js.

 

Vou dar uma procurada para ver se acho alguma outra solução melhor, mas esse js deve resolver por hora.

 

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 horas atrás, Rodrigo30 disse:

Realmente sua afirmação e positiva quando falou sobre o (webkit), estou te enviando um print para você poder verificar.

 

Mesmo assim, tenta usar essas propriedade e testa, pois acabei de ver no Can I use e está dizendo que essa propriedade é suportada em plataformas Android: "Only supported on Android & Mac platforms (and only the "auto" value) for now..."

 

Se não funcionar tenta o Hyphenator.js e poste o resultado aqui por favor.

 

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.