CODEWITHSUNDEEP
htmlcss
Sergej
Sergej

Reputation: 1092

CSS property to specify on which characters a String can be broken

If I have a long String (like an URL) Browsers will break it at some characters like -, can I specify other characters on which the String should break?

For example:

https://www.this-is-my-url.org/upload_dir/2015/01/foo_bar_faq.pdf

Having just enough space for 40 characters per line in the box it would break like:

                                        | <- this is 40 chars mark
https://www.this-is-my-
url.org/upload_dir/2015/01/foo_bar_faq.pdf

and the last line would even cause an overflow, because there is no "breakable char". I'm looking for a CSS-property like:

p.url {
  word-break-chars: "_/.";
}

So the URL could break on _, / or .and it would look more like:

                                        |
https://www.this-is-my-url.org/upload_
dir/2015/01/foo_bar_faq.pdf

And word-break: break-all; is NOT an option for me! It looks really bad:

                                        |
https://www.this-is-my-url.org/upload_di
r/2015/01/foo_bar_faq.pdf

Upvotes: 0

Views: 118

Answers (2)

Sergej
Sergej

Reputation: 1092

Owing to JavaForAndroid's comment I worked out this jQuery solution:

$( document ).ready(
    $('.download a').each(function(){
        var newText = $(this).text().replace('_', '_\u200B')
                .replace('/', '/\u200B')
                .replace('.', '.\u200B');

        $(this).text(newText);
    })
);

Where \u200B is the Unicode for a 'Zero Width Space'.

The HTML looks like:

<div class="download">
    <a href="https://www.this-is-my-url.org/upload_dir/2015/01/foo_bar_faq.pdf">
        https://www.this-is-my-url.org/upload_dir/2015/01/foo_bar_faq.pdf
    </a>
    <a href="https://www.this-is-my-url.org/upload_dir/2014/11/foo_bar.pdf">
        https://www.this-is-my-url.org/upload_dir/2014/11/foo_bar.pdf
    </a>
</div>

Upvotes: 0

user5245837
user5245837

Reputation:

Maybe you can use text-overflow: clip;

p{
    white-space: nowrap; 
    width: 12em; 
    overflow-x: auto;
    text-overflow: clip; 
    border: 1px solid #000000;
}
<p title="https://www.this-is-my-
url.org/upload_dir/2015/01/foo_bar_faq.pdf">https://www.this-is-my-
url.org/upload_dir/2015/01/foo_bar_faq.pdf</p>

Upvotes: 1

Related Questions