CSS - How do you make text overflow out both ends of a div?


Tags: html,css

Problem :

I have this div (a red circle):

http://imgur.com/cwVhrgK

which was made with this CSS:

.marker-cluster-div {
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 50%;
color: black;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 30px;
}

How do I make the text in the div flow out both ends of the div equally? I want the text to start slightly to the left of the div, and end slightly to the right of it if it doesn't fit. If the text does fit, have it in the center.

How do I do this in CSS?



Solution :

As I mentioned in my comment, you should not have text actually flowing out of the 'containing' div.

I would suggest something like this.

JSfiddle Demo

HTML

<div class="circle">
    <div class="text">
        <p>Lorem ipsum dolor sit.</p>
    </div>
</div>

CSS

.circle {
    margin: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
    position: relative;
    background: red;
}

.circle .text {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:auto;   
    white-space:nowrap;
}

or..even better - JSfiddle Demo (Pseudo-element)

HTML

<div class="circle">
    <p>Lorem ipsum dolor sit.</p>
</div>

CSS

.circle {
    position: relative;
    display: inline-block;
}

.circle:after {
    content:"";
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:auto;
    width:50px;
    height:50px;
    border-radius:50%;
    background: red;
    z-index:-1;
}

    CSS Howto..

    How do change CSS Class from Code Behind?

    how to implement list bullets in CSS [closed]

    How to make multiple gradient work with CSS

    HTML/CSS How to format Text and have an Image floating next to it

    how to 3D rotate a 'a' tag?

    How can I avoid using too many classes in CSS?

    make the div (in css) to grow bottom-up? how?

    HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

    How to prevent image in fluid container displayed cropped

    Jquery: show IMG on click

    How to apply a CSS class on hover to dynamically generated submit buttons?

    Can't figure out how to fix CSS for 3rd party library element

    Angular Material Flexbox - How to add margin between wrapped rows?

    How can I apply CSS to dropdownlists?

    CSS page headers - how to use print margins?

    How to create a mouseover effect on menu links EXCEPT for the current page?

    How to get every line of text / elements of a page centered horizontally?

    Two sprites on same position: how to make this happen?

    How to add style to the parent when radio button is selected

    how to set css and html in textarea [closed]

    Single
    with Box-Shadow = 6 cicles. How it works?

    How can I print a full gridview area via a custom print window?

    Show 1 row on desktop and 2 rows on mobile

    how can I overcome existing css and change button style to the default windows style button?

    How to make the page layout stay the same after minimized?

    How do you associate a css/sass stylesheet to a view in rails?

    How do I get my header to align with my navigation bar at the center of my page?

    How can i add a preload function for my images?

    How to persist CSS changes with Chrome Developer Tools

    How to get html data-attribute value in css regular expressions