1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Limit text length using CSS problem

Discussion in 'CSS' started by Divvy, Jul 28, 2017.

  1. #1
    Hello guys,

    I'm trying to limit number of characters in a text using CSS, but I'm having some problems trying to do in a hyperlink text.

    Whats wrong with my code?
    https://jsfiddle.net/0ehtchsh/3/
    SEMrush
    The text inside "p" tag is working fine.
    But the text inside "a" tag is not working.

    Can someone please help me?

    Thanks!
     
    Divvy, Jul 28, 2017 IP
    SEMrush
  2. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #2
    Hi @Divvy

    You need to add the following code to css class: .maddos-link

    display:inline-block;
    Code (markup):
    --
    G r e e n h o r n
    j a m i e
     
    j a m i e, Jul 28, 2017 IP
  3. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Hey Jamie,

    Thank you very much for tying to help me.
    I tried your code and worked perfectly, but unfortunately together with my site code, causes some issues.

    Can you please test here?
    https://jsfiddle.net/0ehtchsh/4/

    Change change from:
    #display:inline-block;
    Code (markup):
    To:
    display:inline-block;
    Code (markup):
    And click "Run" to see what happens...

    Any way to limit only the text length without break that line?

    Thanks once again :)
     
    Divvy, Jul 28, 2017 IP
  4. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #4
    Hi @Divvy

    Is this how you want it?

    jsfiddle.net/0ehtchsh/7/

    --
    G r e e n h o r n
    j a m i e

    At your service!
     
    j a m i e, Jul 28, 2017 IP
  5. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #5
    Hey Jamie,

    Thank you once again and for cleaning my code too :)

    Worked perfectly, just one little issue in .maddos-link .txt0 with:
    overflow: hidden;
    Code (markup):
    With this code, the text line doesn't appear in same place.

    Any idea how to fix this? :)

    Before:
    [​IMG]

    After:
    [​IMG]
     
    Divvy, Jul 28, 2017 IP
  6. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #6
    Piece of cake. Add float:left; to the following class .maddos-link .txt0 {}

    Here's another updated fiddle for you

    jsfiddle.net/0ehtchsh/8/

    --
    G r e e n h o r n
    j a m i e
     
    j a m i e, Jul 28, 2017 IP
  7. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #7
    I dont know how to tank you for your patience :)

    Your code seems good to me, but for some reason, in my website is showing like this:

    [​IMG]

    The icon that was showing before the title, now appears after the title.
    Updated: http://jsfiddle.net/0ehtchsh/9/

    Probably is better to see directly in the website to find the issue.
    Please check your PM inbox, I have sent you the website URL. :)

    I hope you can help me. Thank you!!
     
    Divvy, Jul 28, 2017 IP
  8. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #8
    I can't view this list on your website because it's prompting me to download the content. I don't download content from unknown sites.
    [​IMG]
    --
    G r e e n h o r n
    j a m i e
     
    j a m i e, Jul 28, 2017 IP
  9. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #9
    You can use the list-style-image property to do custom li markers. More details available at w3schools:
    w3schools.com/cssref/pr_list-style-image.asp

    Updated fiddle:
    jsfiddle.net/0ehtchsh/10/

    --
    G r e e n h o r n
    j a m i e
     
    j a m i e, Jul 28, 2017 IP
  10. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #10
    Why on earth would you ever want to do that with the help of CSS? Just why?
     
    Blank ™, Jul 28, 2017 IP
  11. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #11
    What? That's weird... the website is perfectly clean...
    I created him a few days and I don't have any code to make that prompt. Are you sure it was from my website?

    There is nothing about that in my source code.
     
    Divvy, Jul 28, 2017 IP
  12. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #12
    Well the code was kind of messy. Maybe you accidentally concocted this prompt without even knowing it.

    --
    G r e e n h o r n
    j a m i e

    Here for the long haul or until I make it to Active Member status :)
     
    j a m i e, Jul 28, 2017 IP
  13. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #13
    Thank you Jamie,

    It seems that is related with WP Super Cache plugin:
    https://wordpress.org/support/topic/site-visitors-getting-downloadgz-instead-of-the-site/

    I have found this in my website footer code source:
    
    <!-- Compression = gzip --><div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1920</span> x <span class="tooltipHeight" id="winHeight">1040</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1920</span> x <span class="tooltipHeight" id="vpHeight">604</span></div></body></html>
    Code (markup):
    Meanwhile I deactivated the plugin and it seems that fixed the problem.
    Thank you for the warning my friend.
     
    Divvy, Jul 29, 2017 IP
  14. malky66

    malky66 Illustrious Member

    Messages:
    3,337
    Likes Received:
    2,013
    Best Answers:
    75
    Trophy Points:
    465
    #14
    How did you check it? he hasn't posted the URL....
     
    malky66, Jul 29, 2017 IP
  15. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #15
    I was asking the same thing... I think he is trolling us.
     
    Divvy, Jul 29, 2017 IP
  16. malky66

    malky66 Illustrious Member

    Messages:
    3,337
    Likes Received:
    2,013
    Best Answers:
    75
    Trophy Points:
    465
    #16
    Pathetic! Just another dumbass trying to inflate his post count, you won't last long here.
     
    malky66, Jul 29, 2017 IP
  17. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #17
    Yeah, I agree with you. But DP staff aren't sleeping :)

    Anyway...

    Maybe if I give the URL, is more easy for someone to help me:
    http://thebtcdude.com
    Code (markup):
    With current code, is showing like this:

    [​IMG]

    And I need to show like this:
    [​IMG]

    Any ideas? :)
     
    Divvy, Jul 29, 2017 IP
  18. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,509
    Likes Received:
    1,026
    Best Answers:
    19
    Trophy Points:
    400
    #18
    Just add vertical-align: middle; to those star and bitcoin sign css codes.
     
    qwikad.com, Jul 29, 2017 IP
  19. Divvy

    Divvy Well-Known Member

    Messages:
    719
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #19
    You mean inside .sprite.star and .sprite.default?
    Didn't worked.... Did you tried?
     
    Divvy, Jul 29, 2017 IP
  20. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #20
    @qwikad.com, it should be top in this case, not middle.
     
    Blank ™, Jul 29, 2017 IP