conceal the starting and ending markers for text separators

Question

conceal the starting and ending markers for text separators

Here are two different methods to tackle this issue: one using pure CSS and the other utilizing jQuery. These solutions will allow for any symbol or image to be used as a separator.

Note: Creating and finding solutions for questions like these can be quite challenging, so I apologize if this has been addressed before.

I am dealing with a block of text that is multi-lined and justified, containing random (but not entirely) text hyperlink elements (such as tags or categories). These elements are separated by "|" symbols with spaces around them. This setup resembles a tag cloud but with fixed font-weight, size, and formatting. The problem arises when a separator is placed at the beginning or end of a line, which looks unattractive due to the nowrap setting on the link elements. I am looking for a solution to remove separators from the start and end of lines.

To better illustrate, let me provide an example:

C++ | PHP | CSS | ASP |
JavaScript | jQuery
| HTML 5 | StackOverflow

The layout above demonstrates the issue. Each line should have content aligned to both sides without separators trailing off the ends. My goal is to achieve a structure similar to this:

C++ | PHP | CSS | ASP
JavaScript | jQuery
HTML 5 | StackOverflow

Having a fixed number of elements in each line or enforcing a fixed width is not feasible in this scenario.

The only workaround I have thought of involves using monospace fonts and programmatically counting symbols to print line-by-line with server-side scripting. However, this approach comes with the downside of having to use monospace fonts. I am seeking a more elegant solution, such as implementing pure HTML/CSS (ideal) or formatting with JavaScript/jQuery after output.

Thank you for your assistance!

EDIT: In response to a comment below, the markup can be flexible and structured according to preference, something like:

<div><a href="#">tag 1</a> | <a href="#">tag 2</a> | <a href="#">tag 3</a></div>

javascript jquery html css

Answer 1

Answer №1

Check out this cool concept: http://jsfiddle.net/WyeSz/
^{(please note that the jsfiddle demo includes a CSS reset, so you may need to add extra CSS for resetting list styles, etc.)}

The idea is to apply border-left to the list items, and then shift the entire list -1px to the left within a container with overflow:hidden, which hides the left borders.

<div>
    <ul>
        <li>C++</li>
        <li>PHP</li>
        <li>CSS</li>
        <li>ASP</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>HTML 5</li>
        <li>StackOverflow</li>
    </ul>
</div>

ul {
    width:200px;  
    margin-left:-1px;/* hide the left borders */
}
li {
    float:left;   
    padding:2px 10px;
    border-left:1px solid #000;
}
div {
   overflow:hidden;/* hide the left borders */  
}

Answer 2

Check out this cool concept: http://jsfiddle.net/WyeSz/
^{(please note that the jsfiddle demo includes a CSS reset, so you may need to add extra CSS for resetting list styles, etc.)}

The idea is to apply border-left to the list items, and then shift the entire list -1px to the left within a container with overflow:hidden, which hides the left borders.

<div>
    <ul>
        <li>C++</li>
        <li>PHP</li>
        <li>CSS</li>
        <li>ASP</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>HTML 5</li>
        <li>StackOverflow</li>
    </ul>
</div>

ul {
    width:200px;  
    margin-left:-1px;/* hide the left borders */
}
li {
    float:left;   
    padding:2px 10px;
    border-left:1px solid #000;
}
div {
   overflow:hidden;/* hide the left borders */  
}

Answer 3

Answer №2

A solution to achieve this is by enclosing the | within a tag. Check out this example for reference.

Here is the code snippet:

<div id="tags">
    <a href="#">C++</a>
    <span>|</span>
    <a href="#">PHP</a>
    <span>|</span>
    <a href="#">ASP</a>
    <span>|</span>
    <a href="#">JavaScript</a>
    <span>|</span>
    <a href="#">jQuery</a>
    <span>|</span>
    <a href="#">HTML 5</a>
    <span>|</span>
    <a href="#">StackOverflow</a>
</div>

For styling, use the following CSS:

#tags {
    width: 170px;
}
#tags a {
    white-space: nowrap;
}

To automate the process using JavaScript (jQuery), you can apply the following script:

var iTop;
$("#tags a").each(function() {
    if (iTop < $(this).offset().top) {
        $(this).prev("span").remove();
    }
    iTop = $(this).offset().top;
});

Answer 4

A solution to achieve this is by enclosing the | within a tag. Check out this example for reference.

Here is the code snippet:

<div id="tags">
    <a href="#">C++</a>
    <span>|</span>
    <a href="#">PHP</a>
    <span>|</span>
    <a href="#">ASP</a>
    <span>|</span>
    <a href="#">JavaScript</a>
    <span>|</span>
    <a href="#">jQuery</a>
    <span>|</span>
    <a href="#">HTML 5</a>
    <span>|</span>
    <a href="#">StackOverflow</a>
</div>

For styling, use the following CSS:

#tags {
    width: 170px;
}
#tags a {
    white-space: nowrap;
}

To automate the process using JavaScript (jQuery), you can apply the following script:

var iTop;
$("#tags a").each(function() {
    if (iTop < $(this).offset().top) {
        $(this).prev("span").remove();
    }
    iTop = $(this).offset().top;
});

Answer 5

Answer №3

Give this a shot:

Using jQuery:

$('document').ready(function() {
    $('div').find('a').not(':last-child').after(' | ');
});

In your HTML:

<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>
<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>
<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>

This method allows you to use any HTML content as your separator.

Answer 6

Give this a shot:

Using jQuery:

$('document').ready(function() {
    $('div').find('a').not(':last-child').after(' | ');
});

In your HTML:

<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>
<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>
<div><a href="#">tag 1</a><a href="#">tag 2</a><a href="#">tag 3</a></div>

This method allows you to use any HTML content as your separator.

conceal the starting and ending markers for text separators

Answer №1

Answer №2

Answer №3

Similar questions

Accessing the camera or photo library in React Native does not require any permissions

The object THREE.DRACOLoader does not have a constructible function

Can a sophisticated text editor be utilized without a content management system?

Obtain the coordinates of the pixel in an image on the canvas when a mouse

Do you know of any helpful resources for learning JSON with PHP through video tutorials?

Experiencing difficulties typing into a text/input field using electron

What is the best way to implement external routes.js files in order to avoid defining all routes within app.js?

Retrieve JSON data upon refreshing the page

Error in Node.js: The res.send method is undefined

Unable to establish the origin for an element using JavaScript

Utilizing Vue.js to pass a slot to a customized Bootstrap-Vue Table component

Feature in ES6: map_iteration

Discovering feedback from JavaScript

The function getObjectById is not functioning properly and is throwing an error: TypeError - scene.getObjectById is

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

When using @font-face, Chrome supports it while IE and Firefox do not

Discovering the destination URL that an HTML button submits to

Retrieve information from the API every second

The Django form isn't displaying properly after being imported into the HTML file

Adding an image to a server through PHP in the TinyMCE editor