Can Overflow Text Be Centered

Can overflow text be centered?

I know this question is old, but I just had the same Problem and found a much easier solution with just a span.
http://jsfiddle.net/7hy3w2jj/

<div>some text</div>
<div>
    <span class="text-overflow-center">some text that will overflow</span>
</div>

Then you just need this definition

.text-overflow-center {
    margin-left: -100%;
    margin-right: -100%;
    text-align: center;
}

If you can work with pseudo elements, it can be done with no html at all.
Just add these definition to your text container. http://jsfiddle.net/7287L9a8/

div:before {
    content: "";
    margin-left: -100%;
}
div:after {
    content: "";
    margin-right: -100%;
}

The only downside to the pseudo variant is that it only works with one line of text.

How to center align an overflowing element in CSS

^{I will answer this for now, but I think it may be a duplicate. If one is found, I will delete the answer.}

You can do this by making the <h1> element a flex item and using justify-content: center; on it.

.titles {  text-align: center;  padding: 3rem 0;  margin: 0 auto;  max-width: 420px;  background: lightgrey;}
h1 {  font-size: 2.9rem;  margin: 0 0 1.9rem;  color: #3d78c7;  font-weight: 700;  line-height: 1.2;  display: flex;  justify-content: center;}

<div class="titles">  <h1>Allgemeine Geschäftsbedingungen</h1></div>

Centering scaled overflowing text

If you set the container to display:flex + justify-content:center that centers it correctly.

.button {  width: 120px;  height: 30px;  background: yellow;  display: flex;  justify-content: center;}.button-text {  line-height: 30px;  transform: scale(0.7, 1);  white-space: nowrap;}

<div class="button">  <div class="button-text">    Very long button text  </div></div>

Text overflow ellipsis the dots should be center of the text

This will not done by using pure CSS, So i found the solution with the help of jQuery.

<div id="wrapper">
    <div class="example">
        <h1>How to display Text-Overflow:ellipsis dots in center of the text</h1>
        <p><strong>Truncate text using jQuery</strong></p>
        <div class="r">
            <div class="box after pathname" id="dot5">
                <div class="pathname">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae pretium mauris. Ut tincidunt arcu diam, in congue elit efficitur id. Nunc maximus diam et tellus tincidunt, vitae placerat lacus ullamcorper.</div>
            </div>
        </div>
    </div>
</div>

Css:

div.r {
    width: 275px;
    background-color:red;
}

div.box {
    border: 1px solid #ccc;
    height: 40px;
    padding: 15px 20px 10px 20px;
}

.pathname {
    height: 25px;
    color:#fff;
    font-size:18px;
}

Javascript:

$(function() {
    $('#dot5 .pathname').each(function() {
        var path = $(this).html().split(' ');
        if (path.length === 0) {
            return;
        }

        var name = path.pop();
        $(this).html(path.join( ' ' ) + '<span class="filename">' + name + '</span>');
        $(this).dotdotdot({
            after: '.filename',
            wrap: 'letter'
        });
    });
});

Demo Here

Overflow text align left

Alternatively, set the <span>'s max-width

.td > span {
  max-width:100%;
}

Text was left-aligned within the span, but the span was centered and extended beyond the sides of the div.

How can I center text (horizontally and vertically) inside a div block?

If it is one line of text and/or image, then it is easy to do. Just use:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

---

Update for 2020:

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

To specify a fixed width for the child, which is called a "flex item":

#content {
  flex: 0 0 120px;
}

Example: http://jsfiddle.net/2woqsef1/1/

To shrink-wrap the content, it is even simpler: just remove the flex: ... line from the flex item, and it is automatically shrink-wrapped.

Example: http://jsfiddle.net/2woqsef1/2/

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column; to the flex container. This is how it works between a flex container and its immediate child elements.

There is an alternative method of doing the centering: by not specifying center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.

---

Update for 2016 / 2017:

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

position: relative;
top: 50%;
transform: translateY(-50%);

Example: https://jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width:

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Example: https://jsfiddle.net/wb8u02kL/2/

If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height method would work. Otherwise, flexbox would do the job.

How to center text vertically if line break occurs

you have to use display: flex; to make it vertically centered:

.low {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center; 
}

How to text-align CENTER when using overflow HIDDEN?

That space left of the aaaaaa's is just your padding:20px on the span.

• Put that padding:20px; on the containing div, and..
• Make your span another div, and then put the overflow:hidden on that inside div

Live example: http://jsfiddle.net/Hebj4/

HTML

<div id="div1">
   <div id="div2">Can Overflow Text Be CenteredCan Overflow Text Be CenteredCan Overflow Text Be Centereda</div>
</div>

CSS

#div1 {
    width:120px;
    height:50px;
    padding:0px 20px 0px 20px;
    line-height:50px;
    text-align:center;
    white-space:nowrap;
    background-color: #777777;
}
#div2 {
    overflow:hidden;
}

---

Related Topics