how to Fix Display Message in multiple lineHow to horizontally center a <div>?How to make div not larger than its contents?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to make a div 100% height of the browser window?Transitions on the display: propertyHow can I transition height: 0; to height: auto; using CSS?How to disable resizable property of textarea?How do I make a placeholder for a 'select' box?How do I vertically center text with CSS?

After an 87 day stay in the USA, can I return for a long weekend? (ESTA)

How do I type a hyphen in iOS 12?

What is the theme of analysis?

Why can't we do three-way comparison in C++?

Forgot passport for Alaska cruise (Anchorage to Vancouver)

one-hot-encoding categorical data gives error

What does "lit." mean in boiling point or melting point specification?

Realistic, logical way for men with medieval-era weaponry to compete with much larger and physically stronger foes

What is the logic behind charging tax _in the form of money_ for owning property when the property does not produce money?

In The Incredibles 2, why does Screenslaver's name use a pun on something that doesn't exist in the 1950s pastiche?

Part of my house is inexplicably gone

Is Jesus the last Prophet?

Enchiridion, 16: Does a stoic moan, or not?

Open Drain pin not going to GND

How to generate list of *all* available commands and functions?

Professor Roman loves to teach unorthodox Chemistry

Why do I seem to lose data using this bash pipe construction?

Was self-modifying code possible using BASIC?

Suppose leased car is totalled: what are financial implications?

How to befriend someone who doesn't like to talk?

How to represent jealousy in a cute way?

Find all letter Combinations of a Phone Number

How to Convert an Object into Array in magento 2

Create a cube from identical 3D objects



how to Fix Display Message in multiple line


How to horizontally center a <div>?How to make div not larger than its contents?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to make a div 100% height of the browser window?Transitions on the display: propertyHow can I transition height: 0; to height: auto; using CSS?How to disable resizable property of textarea?How do I make a placeholder for a 'select' box?How do I vertically center text with CSS?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








1


















.abc
white-space:pre-wrap;

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>





Say I am displaying the message in Angular application in 2 line Like this:
LabelStudent:Ram is a good boy,
he is also kind.



I want the second line message i.e. He is also kind, should be displayed just below the first message and not beneath the label










share|improve this question
























  • This seems more like a CSS question than an Angular question.

    – P Ackerman
    Mar 24 at 23:43

















1


















.abc
white-space:pre-wrap;

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>





Say I am displaying the message in Angular application in 2 line Like this:
LabelStudent:Ram is a good boy,
he is also kind.



I want the second line message i.e. He is also kind, should be displayed just below the first message and not beneath the label










share|improve this question
























  • This seems more like a CSS question than an Angular question.

    – P Ackerman
    Mar 24 at 23:43













1












1








1


1









.abc
white-space:pre-wrap;

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>





Say I am displaying the message in Angular application in 2 line Like this:
LabelStudent:Ram is a good boy,
he is also kind.



I want the second line message i.e. He is also kind, should be displayed just below the first message and not beneath the label










share|improve this question



















.abc
white-space:pre-wrap;

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>





Say I am displaying the message in Angular application in 2 line Like this:
LabelStudent:Ram is a good boy,
he is also kind.



I want the second line message i.e. He is also kind, should be displayed just below the first message and not beneath the label






.abc
white-space:pre-wrap;

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>





.abc
white-space:pre-wrap;

<label >student</Label>:<span class="abc">He is a good boy </br> he is also kind'</span>






css angular html5






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 24 at 23:48







user2900724

















asked Mar 24 at 23:03









user2900724user2900724

63




63












  • This seems more like a CSS question than an Angular question.

    – P Ackerman
    Mar 24 at 23:43

















  • This seems more like a CSS question than an Angular question.

    – P Ackerman
    Mar 24 at 23:43
















This seems more like a CSS question than an Angular question.

– P Ackerman
Mar 24 at 23:43





This seems more like a CSS question than an Angular question.

– P Ackerman
Mar 24 at 23:43












1 Answer
1






active

oldest

votes


















0














This can easily be achieved with flexbox. I have reproduced a demo over here.



HTML:



<div class="container">
<label>student :</label>
<div class="information">
<span>He is a good boy</span>
<span> he is also kind'</span>
</div>
</div>


CSS:



.container 
display: flex;
flex-direction: row;


.information
display: flex;
flex-direction: column;






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329424%2fhow-to-fix-display-message-in-multiple-line%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    This can easily be achieved with flexbox. I have reproduced a demo over here.



    HTML:



    <div class="container">
    <label>student :</label>
    <div class="information">
    <span>He is a good boy</span>
    <span> he is also kind'</span>
    </div>
    </div>


    CSS:



    .container 
    display: flex;
    flex-direction: row;


    .information
    display: flex;
    flex-direction: column;






    share|improve this answer



























      0














      This can easily be achieved with flexbox. I have reproduced a demo over here.



      HTML:



      <div class="container">
      <label>student :</label>
      <div class="information">
      <span>He is a good boy</span>
      <span> he is also kind'</span>
      </div>
      </div>


      CSS:



      .container 
      display: flex;
      flex-direction: row;


      .information
      display: flex;
      flex-direction: column;






      share|improve this answer

























        0












        0








        0







        This can easily be achieved with flexbox. I have reproduced a demo over here.



        HTML:



        <div class="container">
        <label>student :</label>
        <div class="information">
        <span>He is a good boy</span>
        <span> he is also kind'</span>
        </div>
        </div>


        CSS:



        .container 
        display: flex;
        flex-direction: row;


        .information
        display: flex;
        flex-direction: column;






        share|improve this answer













        This can easily be achieved with flexbox. I have reproduced a demo over here.



        HTML:



        <div class="container">
        <label>student :</label>
        <div class="information">
        <span>He is a good boy</span>
        <span> he is also kind'</span>
        </div>
        </div>


        CSS:



        .container 
        display: flex;
        flex-direction: row;


        .information
        display: flex;
        flex-direction: column;







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 25 at 0:30







        user10997785




































            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329424%2fhow-to-fix-display-message-in-multiple-line%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

            용인 삼성생명 블루밍스 목차 통계 역대 감독 선수단 응원단 경기장 같이 보기 외부 링크 둘러보기 메뉴samsungblueminx.comeh선수 명단용인 삼성생명 블루밍스용인 삼성생명 블루밍스ehsamsungblueminx.comeheheheh

            155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해