Olá boa tarde amigos e professores! Sabe dar um exemplo de código igual este da caixa de diálogo com borda mostrada no conteúdo Triângulo na legenda? Abraço...
9
respostas
respostas
criar caixa de dialogo (Triângulo na legenda)
Rogério, você quer ver o código pronto de um balão semelhante ao da atividade?
Se for, segue: https://codepen.io/anon/pen/mMaNdM
Não esqueça de tentar entender cada ponto do código, ok?
Abraço, Thiago Vilaça
Olá Tiago, muito obrigado pela dica! Notei que se colocarmos muito conteúdo de texto dentro deste balão o mesmo não fica responsivo fazendo cortes no texto, tem alguma dica pra resolver este problema? Abraço.
Rogério, aqui ele está recebendo perfeitamente grandes quantidades de texto. Ele não tem largura definida, então atinge até 100% da tela até fazer a quebra de linha. Mas você pode definir as viewports e manipulá-lo como quiser em cada resolução.
Oi Tiago, meu código foi copiado do link apenas fiz uma estrutura html, vejo o código nesta mensagem, obrigado.
insira seu código aqui<!doctype html>
Rogério, seu código não saiu. Inclua entre os três backticks :)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 140px 10px;
text-align: center;
}
/* Criando o balão */
.bubble {
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
color: #333;
display: inline-block;
font: 16px/24px sans-serif;
padding: 12px 24px;
position: relative;
}
/* Criando o triângulo */
.bubble.active:after,
.bubble.active:before {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: '';
left: 50%;
margin-left: -15px;
position: absolute;
}
/* Criando a borda do triângulo */
.bubble.active:before {
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 18px solid;
border-top-color: inherit;
bottom: -18px;
margin-left: -18px;
}
</style>
</head>
<body>
<span class="bubble active" style="overflow-wrap: break-word !important;">Balão com borda flhdfkhkdsfhkdhsfklhdsklfghdkjsgfkjdsgfkjdgsfjdgfjdgsfjgdjsgfkjdsgfjdgfsjhdgfsjgfdj
dnsdkgjsdgjgsdjhgsadjhgjsdgkjgasdkjasgdkjasgdkjgasdkjgsadkjgaskjdgkjasdg</span>
</body>
</html>Rogério, simule com algum texto real ou um lorem ipsum que seja... com caracteres todos juntos, sem espaço, ele não terá nunca como quebrar suas linhas e ajustar o balão :)
Tem razão Tiago com lorem ipsum funcionou certinho mas porque no modelo que digitei manualmente deu problema? Porque não posso quebrar linha sendo que o texto está dentro de um span?
Pode se vc definir display:block;na classe do <span>. Ou se trocar o elemento <span> por uma <div>que já é block de default.
Eu fiz o exemplo para você com span pois não imaginei que quisesse usar uma palavra com centenas de caracteres :)
Se o elemento for block, o texto que tiver dentro irá respeitá-lo independente do tamanho da palavra. O texto será envolvido por um "bloco".