Advanced wraps in CSS

Multi tool use
Multi tool use












0















I have the following code:



<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>


The problem is that dash.
When the second time tag is breaking into a new line, the dash should break into an extra line. When no break is needed, then the text should be as it is.



So the output behaviour, what I am trying to force is:



<time>2018-23-12&nbsp;23:59</time>

<time>2018-24-12&nbsp;23:59</time>


Any ideas how to solve that?
Thanks for your help everybody :-)










share|improve this question























  • You want each <time> element to render in a new line?

    – vsync
    Dec 30 '18 at 12:26











  • yes, but only when the container was not big enough to hold the complete code in the line.

    – user1410569
    Dec 30 '18 at 14:43
















0















I have the following code:



<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>


The problem is that dash.
When the second time tag is breaking into a new line, the dash should break into an extra line. When no break is needed, then the text should be as it is.



So the output behaviour, what I am trying to force is:



<time>2018-23-12&nbsp;23:59</time>

<time>2018-24-12&nbsp;23:59</time>


Any ideas how to solve that?
Thanks for your help everybody :-)










share|improve this question























  • You want each <time> element to render in a new line?

    – vsync
    Dec 30 '18 at 12:26











  • yes, but only when the container was not big enough to hold the complete code in the line.

    – user1410569
    Dec 30 '18 at 14:43














0












0








0








I have the following code:



<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>


The problem is that dash.
When the second time tag is breaking into a new line, the dash should break into an extra line. When no break is needed, then the text should be as it is.



So the output behaviour, what I am trying to force is:



<time>2018-23-12&nbsp;23:59</time>

<time>2018-24-12&nbsp;23:59</time>


Any ideas how to solve that?
Thanks for your help everybody :-)










share|improve this question














I have the following code:



<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>


The problem is that dash.
When the second time tag is breaking into a new line, the dash should break into an extra line. When no break is needed, then the text should be as it is.



So the output behaviour, what I am trying to force is:



<time>2018-23-12&nbsp;23:59</time>

<time>2018-24-12&nbsp;23:59</time>


Any ideas how to solve that?
Thanks for your help everybody :-)







css line-breaks word-wrap






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Dec 30 '18 at 12:22









user1410569user1410569

816




816













  • You want each <time> element to render in a new line?

    – vsync
    Dec 30 '18 at 12:26











  • yes, but only when the container was not big enough to hold the complete code in the line.

    – user1410569
    Dec 30 '18 at 14:43



















  • You want each <time> element to render in a new line?

    – vsync
    Dec 30 '18 at 12:26











  • yes, but only when the container was not big enough to hold the complete code in the line.

    – user1410569
    Dec 30 '18 at 14:43

















You want each <time> element to render in a new line?

– vsync
Dec 30 '18 at 12:26





You want each <time> element to render in a new line?

– vsync
Dec 30 '18 at 12:26













yes, but only when the container was not big enough to hold the complete code in the line.

– user1410569
Dec 30 '18 at 14:43





yes, but only when the container was not big enough to hold the complete code in the line.

– user1410569
Dec 30 '18 at 14:43












3 Answers
3






active

oldest

votes


















0

















time,
span {
display: inline-block;
}

<time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>





Something like this ?






share|improve this answer
























  • sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

    – user1410569
    Dec 30 '18 at 16:46











  • I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

    – niconiiiavec3i
    Dec 30 '18 at 18:02













  • Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

    – user1410569
    Dec 30 '18 at 21:20



















0














Use display:block; to time






time{
display:block;
}

<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>








share|improve this answer
























  • tell me for more help:)

    – לבני מלכה
    Dec 30 '18 at 12:27











  • thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

    – user1410569
    Dec 30 '18 at 14:42





















0

















$("section").resizable();

section{
outline: 1px solid pink;
max-width: 80%;
min-height: 80px;
}

time{
display:inline-block;
white-space: nowrap;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section>
<time>2018-23-12&nbsp;23:59</time>
&ndash;
<time>2018-24-12&nbsp;23:59</time>
</section>





If you want the - to break into a line of its own, you might need some javascript to detect a line break and change the HTML accordingly






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%2f53977557%2fadvanced-wraps-in-css%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0

















    time,
    span {
    display: inline-block;
    }

    <time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>





    Something like this ?






    share|improve this answer
























    • sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

      – user1410569
      Dec 30 '18 at 16:46











    • I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

      – niconiiiavec3i
      Dec 30 '18 at 18:02













    • Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

      – user1410569
      Dec 30 '18 at 21:20
















    0

















    time,
    span {
    display: inline-block;
    }

    <time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>





    Something like this ?






    share|improve this answer
























    • sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

      – user1410569
      Dec 30 '18 at 16:46











    • I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

      – niconiiiavec3i
      Dec 30 '18 at 18:02













    • Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

      – user1410569
      Dec 30 '18 at 21:20














    0












    0








    0










    time,
    span {
    display: inline-block;
    }

    <time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>





    Something like this ?






    share|improve this answer
















    time,
    span {
    display: inline-block;
    }

    <time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>





    Something like this ?






    time,
    span {
    display: inline-block;
    }

    <time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>





    time,
    span {
    display: inline-block;
    }

    <time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Dec 30 '18 at 15:32









    niconiiiavec3iniconiiiavec3i

    312




    312













    • sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

      – user1410569
      Dec 30 '18 at 16:46











    • I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

      – niconiiiavec3i
      Dec 30 '18 at 18:02













    • Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

      – user1410569
      Dec 30 '18 at 21:20



















    • sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

      – user1410569
      Dec 30 '18 at 16:46











    • I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

      – niconiiiavec3i
      Dec 30 '18 at 18:02













    • Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

      – user1410569
      Dec 30 '18 at 21:20

















    sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

    – user1410569
    Dec 30 '18 at 16:46





    sadly no. it is now possible that the dash is on the same line as the first time tag. the dash should be in a extra line, when the second time is breaking to a new line becauseof missing space in the container

    – user1410569
    Dec 30 '18 at 16:46













    I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

    – niconiiiavec3i
    Dec 30 '18 at 18:02







    I don't know if it's possible to do that without using breakpoint. If you need I can help you with breakpoint

    – niconiiiavec3i
    Dec 30 '18 at 18:02















    Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

    – user1410569
    Dec 30 '18 at 21:20





    Okay I am using now breakpoints. thanks for the help. Sadly there is no solution for the descriped way. But with breakpoints it is working like a charm.

    – user1410569
    Dec 30 '18 at 21:20













    0














    Use display:block; to time






    time{
    display:block;
    }

    <time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>








    share|improve this answer
























    • tell me for more help:)

      – לבני מלכה
      Dec 30 '18 at 12:27











    • thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

      – user1410569
      Dec 30 '18 at 14:42


















    0














    Use display:block; to time






    time{
    display:block;
    }

    <time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>








    share|improve this answer
























    • tell me for more help:)

      – לבני מלכה
      Dec 30 '18 at 12:27











    • thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

      – user1410569
      Dec 30 '18 at 14:42
















    0












    0








    0







    Use display:block; to time






    time{
    display:block;
    }

    <time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>








    share|improve this answer













    Use display:block; to time






    time{
    display:block;
    }

    <time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>








    time{
    display:block;
    }

    <time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>





    time{
    display:block;
    }

    <time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Dec 30 '18 at 12:25









    לבני מלכהלבני מלכה

    10.2k1826




    10.2k1826













    • tell me for more help:)

      – לבני מלכה
      Dec 30 '18 at 12:27











    • thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

      – user1410569
      Dec 30 '18 at 14:42





















    • tell me for more help:)

      – לבני מלכה
      Dec 30 '18 at 12:27











    • thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

      – user1410569
      Dec 30 '18 at 14:42



















    tell me for more help:)

    – לבני מלכה
    Dec 30 '18 at 12:27





    tell me for more help:)

    – לבני מלכה
    Dec 30 '18 at 12:27













    thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

    – user1410569
    Dec 30 '18 at 14:42







    thanks, but this does not resolve the issue. When the browser window is big enough, then the time blocks should not wrap and the dash should show up in the same line. The dash should only wrap to a special line, when the second time is wrapped to another line. I don't want to use breakpoints here

    – user1410569
    Dec 30 '18 at 14:42













    0

















    $("section").resizable();

    section{
    outline: 1px solid pink;
    max-width: 80%;
    min-height: 80px;
    }

    time{
    display:inline-block;
    white-space: nowrap;
    }

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <section>
    <time>2018-23-12&nbsp;23:59</time>
    &ndash;
    <time>2018-24-12&nbsp;23:59</time>
    </section>





    If you want the - to break into a line of its own, you might need some javascript to detect a line break and change the HTML accordingly






    share|improve this answer




























      0

















      $("section").resizable();

      section{
      outline: 1px solid pink;
      max-width: 80%;
      min-height: 80px;
      }

      time{
      display:inline-block;
      white-space: nowrap;
      }

      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <section>
      <time>2018-23-12&nbsp;23:59</time>
      &ndash;
      <time>2018-24-12&nbsp;23:59</time>
      </section>





      If you want the - to break into a line of its own, you might need some javascript to detect a line break and change the HTML accordingly






      share|improve this answer


























        0












        0








        0










        $("section").resizable();

        section{
        outline: 1px solid pink;
        max-width: 80%;
        min-height: 80px;
        }

        time{
        display:inline-block;
        white-space: nowrap;
        }

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <section>
        <time>2018-23-12&nbsp;23:59</time>
        &ndash;
        <time>2018-24-12&nbsp;23:59</time>
        </section>





        If you want the - to break into a line of its own, you might need some javascript to detect a line break and change the HTML accordingly






        share|improve this answer
















        $("section").resizable();

        section{
        outline: 1px solid pink;
        max-width: 80%;
        min-height: 80px;
        }

        time{
        display:inline-block;
        white-space: nowrap;
        }

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <section>
        <time>2018-23-12&nbsp;23:59</time>
        &ndash;
        <time>2018-24-12&nbsp;23:59</time>
        </section>





        If you want the - to break into a line of its own, you might need some javascript to detect a line break and change the HTML accordingly






        $("section").resizable();

        section{
        outline: 1px solid pink;
        max-width: 80%;
        min-height: 80px;
        }

        time{
        display:inline-block;
        white-space: nowrap;
        }

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <section>
        <time>2018-23-12&nbsp;23:59</time>
        &ndash;
        <time>2018-24-12&nbsp;23:59</time>
        </section>





        $("section").resizable();

        section{
        outline: 1px solid pink;
        max-width: 80%;
        min-height: 80px;
        }

        time{
        display:inline-block;
        white-space: nowrap;
        }

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <section>
        <time>2018-23-12&nbsp;23:59</time>
        &ndash;
        <time>2018-24-12&nbsp;23:59</time>
        </section>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 30 '18 at 18:00









        vsyncvsync

        46.5k36159218




        46.5k36159218






























            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%2f53977557%2fadvanced-wraps-in-css%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







            BnB5eVCFLG0IIW,oIbj j,Gcz,G8wniXuCC,3tLhBtYAefqhNcRt6r5
            fJAitUhsU2twevMK4mL,y

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas