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/

    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
  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:
    785
    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:
    785
    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:
    785
    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:
    785
    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:
    785
    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 Acclaimed Member

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

    Divvy Well-Known Member

    Messages:
    785
    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 Acclaimed Member

    Messages:
    3,997
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #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:
    785
    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:
    7,361
    Likes Received:
    1,713
    Best Answers:
    31
    Trophy Points:
    475
    #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:
    785
    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