Is it possible to make a squiggly line?

前端 未结 12 1689
无人及你
无人及你 2021-02-01 19:04

If I wanted to make a horizontal line, I would do this:




        
12条回答
  •  爱一瞬间的悲伤
    2021-02-01 19:51

    ﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏

    & #65103 ; (wavy low line)

    I hope this is not too much off topic - here is how to use those squiggly lines to underline some text (should be a common use case.)

    method 1 (snatched from Wulf answering a related question)

    
        
            foobar
        
    
    

    (not really a squiggly line but a collection of dots, but looks OK and is beautifully simple.)

    method 2 (inspired by DanieldD)

    using & #65103 ; (wavy low line) unicode character and absolute / relative positioning to put that character underneath some text. Here is a fiddle

    here is "the meat" of the code for the positioning

    function performUnderWavyLowLineazation(contentElt){
        var wavyFontSize = 40;
        var width = contentElt.width();
        contentElt.addClass("underWavyLowLined");
        replaceSpaceByNonBreakingSpace(contentElt);
        var sp = "";
        var wrapper = contentElt.wrap(sp).parent();
        wrapper.addClass("wavyParent");
        var underlining = jQuery(sp, {"class" : "wavyLowLine"}).prependTo(wrapper);
        var ghost;
        var invisibleGhostThatTakesUpTheSpaceThatUnderWavyLowLinedElementShouldTakeButDoesntDueToBeingAbsolute
            = ghost = jQuery(sp, {"class": "invisibleUnderWavyLowLined"}).appendTo(wrapper);
        ghost.html(contentElt.html());
        ghost.find("*").removeAttr("id");
        replaceSpaceByNonBreakingSpace(ghost);
        var numWavyChars = Math.floor(0.1 + width/wavyFontSize);
        innerUnderLine = jQuery(sp, {"class": "innerWaveLine"}).appendTo(underlining);
        innerUnderLine.html("﹏".repeat(numWavyChars));
        var lineLength = wavyFontSize * numWavyChars;
        var defect = width - lineLength;
        innerUnderLine.css("left", defect/2);
        var wavyGroup = jQuery(sp, {"class" : "wavyGroup"}).prependTo(wrapper);
        underlining.appendTo(wavyGroup);
        contentElt.appendTo(wavyGroup);
    }
    

提交回复
热议问题