How to make HTML element that is manually drawn stay fixed?-CodePudding

I am trying to manually draw a rectangle in HTML using dashes and special characters (-, , *) like this:

<div>
<pre>
 -------------------------------------------------------------------------------- 
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
 -------------------------------------------------------------------------------- 
</pre>
</a>
</div>

I also plan on putting text and other elements inside the rectangle, but if I do that, the rectangle would look wonky:

<div>
<a href="HOME.HTM" id="coc">
<pre>
 -------------------------------------------------------------------------------- 
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|                                                                                |
|             random text to put inside                                                                   |
 -------------------------------------------------------------------------------- 
</pre>
</a>
</div>

Which would be rendered on the screen as something like this:

How would I force the HTML to align properly and maintain the rectangular shape that's drawn even with text elements inside?

CodePudding user response：

I would just use a

Just mess around with border-image-slice and border-width to get something that is good enough.

And don't use pre. Just style it to look like a monochrome screen.

body {
  background-color: black;
  color: limegreen;
  font-family: "Courier New";
}

.ascii-border {
  --vertical-slice: 60;
  --horizontal-slice: 70;
  height: 300px;
  width: 400px;
  padding: 1rem;
  border: 4px double currentColor;
  border-image: url(https://i.stack.imgur.com/9aAyn.png);
  border-image-slice: var(--vertical-slice) var(--horizontal-slice);
  border-width: 20px;
  border-image-repeat: round;
}

<div >
  Hello world
</div>

CodePudding user response：

You can use two separate elements and align them using relative positioning:

<div >
    <div >
 --- 
|   |
|   |
|   |
 --- 
    </div>
    <div >
 
 some text
    </div>
</div>

CSS:

.container {
    position: relative;
}

.box {
    white-space: pre;
    font-family: monospace;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    font-family: monospace;
}

Final result: