How to make a text be justified ( maybe by using CSS) in a HTML page?

Hi Experts

Accordingly with the picture the text appears after a double click on the image

img001
How to make the text be justified ( maybe by using CSS) - actually it passes the desired limit.

Thanks in advance
Eduardo FuerteAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
That image shows that the element containing the text is too wide.  You need to set it's width to be the same as the background.
0
Julian HansenCommented:
Can we see your markup?

This appears to be a follow up question where you are adding the text by javascript (http://www.experts-exchange.com/questions/28839079/How-to-dinamically-change-a-band-of-text-accordingly-with-the-button-pushed.html)

We would need to see what that text is being added to in the context of the page and its styling.
0
Eduardo FuerteAuthor Commented:
Hello Julian

Yes, the code is presented by using jquery

CSS to display the buttons horizontally
<style type="text/css">
        #content {
        width: 1000px;
        margin: 0 auto 0 auto;
        display: inline-block;
    }
</style>

   <img src="<?php echo base_url('xxxxxx/xxxx/testeira_compras-publicas_ica.png')?>" alt="xxxxx" title="COMPRASPUBLICAS"/>
        
            <div id="content">
                <img src="<?php echo base_url('xxxxxx/xxxx/botao_o_que_e.png')?>" id = "but1" alt="oquee" title="O QUE E" />
                <img src="<?php echo base_url('xxxxxx/xxxx/botao_pnae.png')?>"    id = "but2" alt="pnae" title="xxx" />
                <img src="<?php echo base_url('xxxxxx/xxxx/botao_ppais.png')?>"   id = "but3" alt="ppais" title="xxx"/>
                <p id="lowertext"></p>
            </div>
    
       <script>

Here the 'long text' that I want to fit in the width

            $("#but1").click(function() {
                    $("#lowertext").html('<p style="text-align:justify">Criado xxxxxxxxxx pelo meio da Lei xxxxxxxxde 2011, o xxxxxx x é uma ação do xxxxxxx que visa estimular a produção e garantir a comercialização dos produtos da agricultura familiar. O Programa faz com que o Estado se torne o principal comprador dos produtos da agricultura familiar, permitindo a melhora da qualidade de vida dos que trabalham no campo.</p>');       
            });

            $("#but2").click(function() {
                    $("#lowertext").html("The second button was pushed.");
            });

            $("#but3").click(function() {
                $("#lowertext").html("The third button was pushed.");
            });

            $("#but4").click(function() {
                $("#lowertext").html("The fourth button was pushed.");
            });
        </script>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Eduardo FuerteAuthor Commented:
After a little seaching, it's just a matter of add this CSS code...

<style type="text/css">
p {
    max-width: 830px;
} 
</style>

Open in new window

0
Julian HansenCommented:
That will work but if you are having to style width on a base element like <p> you probably need to relook at the design of your page.

Ideally elements like <p> should fill their containers - the container should define the width.

For us to be able to advise you we would need to see the page in context - either a link or a page dump of the html and css files.

While this may solve your immediate problem - doing it this way is risky as it could result in unexpected results when you add or change things in the future.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eduardo FuerteAuthor Commented:
Thank you for your concerns!

I have limitations in disponibilize the page contents due the organization rules.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.