HTML <a>无效

Question

Apologies for the short title.

When I echo a <a>-tag via PHP, the link behaves like normal text; it doesn't change the mousepointer, it doesn't go to any given links, but it does follow the CSS rules for a. Here's my code:

<?php $string = "<content-box id='about'>
        <content-box-title>Welcome,</content-box-title><br/>
        <p>
            text
        </p>
        <p>
            text
        </p>
        <p>" //this string is all on one line in my code, 
             //but for question purposes I aligned them, so it's better readable

    echo substr($string, 0, 952) . '... </p><a href="about.php">More</a></content-box>';
 ?>

And my CSS

a {
    color: #d60000;
    border-bottom: 1px dotted #000000;
    text-decoration: none;
}
a:active {
    color: #d60000;
}
container > content > content-box {
    width: 920px;
    padding: 40px;
    margin-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

It did work before, but suddenly it doesn't anymore. Can anyone figure out what's going on?

Thanks.

EDIT: This example is supposed to be a 'preview' of what's on another page (that's why I need a 'more' button). I retrieve the raw HTML from another source and then shorten it. By that reason </p> and </content-box> fall off.

Also <content-box> is a custom element, but it acts just lake a normal <div> (see comments)

EDIT:

<content>
    <?php
        error_reporting(E_ALL & ~E_WARNING);
        $page = new DOMDocument();
        $page->loadHTMLFile('about.php');
        $elm = $page->getElementById('about');

        $faulty_string = $elm->ownerDocument->saveHTML($elm);
        $string = str_replace('ï', 'ï', $faulty_string);

        echo substr($string, 0, 206) . '... </p><a href="about.php">More</a></content-box>';
    ?>
</content>

And #about on about.php

<content-box id='about'>
        <content-box-title>Welcome,</content-box-title><br/>
        <p>
            text
        </p>
        <p>
            text
        </p>
        <p>
            text
        </p>
    </content-box>

CSS: Same as before.

EDIT:

<content-box id="about">
    <content-box-title>Welcome,</content-box-title>
    <br>
    <p> text </p>
    <p> text </p>
    <p> tex... </p>
    <a href="about.php">Lees verder</a>
</content-box>

This is from the DOM Explorer from Firefox.

Answer 1

A better approach to this would be to store the text of the content-box tag in it's own string, then use substr to shorten it.

<?php
$text = '<p>Text</p><p>Text</p>';
$text = substr($text, 0, 952) . '... </p><a href="about.php">More</a>';
$content_box = "<content-box id='about'>
        <content-box-title>Welcome,</content-box-title><br/>
             ".$text.";
        </content-box>";

echo $content_box;
 ?>