Sabit yükseklik konteynerli dikey merkez değişken uzunluklu metnin bir yolu var mı?

Bu div içindeki metni ortalamak için yaygın bir hiledir:

.center-div {
    display:table-cell;
    vertical-align: middle;
}

Sorun şu ki, benim div içindeki metnin değişken uzunluğa sahip bir dizge olması ve kabın yükseklik ve genişliğin sabit olmasını istiyorum. Ancak, yukarıdaki CSS’yi şu şekilde değiştirirken:

.center-div {
    display:table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    text-overflow: ellipsis;
}

Bir tablo hücresi olduğundan, taşma yerine div'in yüksekliğini değiştirir. Metnim çok satırlı bir metin olacağından, satır yüksekliği numarası çalışmaz. Metni merkezlemem ve aynı anda taşıyabilmemin bir yolu var mı?

Not; Sadece bir CSS cevabı tercih edilir. İçerik açılarla oluşturulacak ve oluşturma işleminin ne zaman biteceğini bilmek mümkün değil. Javascript'e kesinlikle ihtiyaç duyulması durumunda, lütfen bunu köşeli yazı ile birlikte kullanabileceğim bir yöntem de belirtin. (spesifik olmak için ng-yineleyin)

2
tecrübeme göre dikey-hizalama: ortada bir nedenden ötürü asla işe yaramaz, metninize div sabit bir yükseklik vererek, alt ve üst dolguyu kullanmaya ve kaydırma için kaydırmayı ayarlamaktan daha iyi olursunuz
katma yazar Rachel Gallen, kaynak

7 cevap

Metin dikey olarak sabit yükseklik ve genişlikte orta olacaktır. word-wrap: break-word; yayılma alanına eklendi

div.center-div
{
    display: table;
    table-layout:fixed;
    margin:0 auto;
}

div.center-div span
{
    display:table-cell;
    max-width:300px;
    height:100px;
    vertical-align:middle;
  background :red;
text-align:center;  
 word-wrap:break-word;
}

HTML

<div class="center-div">
     
          hi
     
</div>

http://jsbin.com/kixizehuhu/3/edit

3
katma
Ödül, çünkü bu, CSS3 desteği gerektirmeyen tek cevap.
katma yazar cytsunny, kaynak

bunu dene..

Html

<div class="center-div">
  <div class="content">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>
</div>

CSS

    .center-div {
    display:table-cell;
    vertical-align: middle;
    width: 100px;    
    text-overflow: ellipsis;
    border:1px solid red;    
}
.content {       
    height: 100px;
    overflow: auto;
}

Fiddle Demo

2
katma
Kodunuzun sorunu, daha az metin olduğunda, metnin dikey olarak merkezde olmamasıdır. Bu jsfiddle.net/hzx3xbvy/2 adresine bakın. Sadece aynı CSS ayarlarına sahip, daha az metin içeren bir demo. Chrome kullanıyorum.
katma yazar cytsunny, kaynak

Metniniz sabit genişliğe ve yüksekliğe sahip bir div içine koyulacaksa, şunu kullanabilirsiniz:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.center-div {
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  border: 1px solid #333;
}
.content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  max-height: 100px;
  overflow: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class="center-div">
  <div class="content">Lorem ipsum dolor sit amet, consectetur.</div>
</div>
</div> </div>

CSS:

.center-div {
   width: 100px;
   height: 100px;
   position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    max-height: 100px;
    overflow: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

CodePen Önizleme Bağlantısı

text-overflow: ellipsis 'nin tek satırlı bir metin için yalnızca beyaz boşluk: nowrap; ile çalıştığını unutmayın.

2
katma

Tam olarak istediğinin bu olup olmadığından emin değilim, ama bu numarayı kullanıyorum:

CSS:

.outer {
     overflow-x: hidden;
     overflow-y: auto;
     text-align: center;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
.outer:after {
     content: "\a0 ";
     position: relative;
     display: inline-block;
     vertical-align: middle;
     top: 0px;
     left: 0px;
     width: 0px;
     height: 100%;
}
.inner {
     display: inline-block;
     vertical-align: middle;
     width: 70%;
     min-height: 100px;
     background: red;
}

HTML

<div class="outer">
  <div class="inner">
    Your Text ....
  </div>
</div>

Jsbin: http://jsbin.com/duwuzogodo/1/edit

Şimdi, iç tabaka dış tabaka içinde hem dikey hem de yatay olarak ortalanmıştır (bu örnekte sabitlenmiştir). Şimdi, iç Katmandaki metin çok büyüyorsa taşabilir ve kaydırma yapabilirsiniz. Yani bu, masa hücresi kesmesini kullanmaktan daha iyidir. Ayrıca, komut dosyası gerekmez.

0
katma

Tamam, bence istediğin bu mu? metninize span ekleyin

http://jsfiddle.net/ct9ey95k/1/

daha fazla eklemeyi veya metin çıkarmayı deneyin ve ihtiyacınıza göre olup olmadığına bakın?

0
katma

Metin taşımak, taşma yapmak ve dikey olarak ortalamak için div'in içine bir öğe yerleştirmeniz ve div kabının boyutta işleyeceğini düşünüyorum.

böyle bir şey:

HTML:

<div class="center-div-content">
    <div class="center-div">
        this a long long long long long long long long long long long long text
    </div>
</div>

CSS:

.center-div-content{    
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.center-div {
    position: absolute;
    width: 100%;    
    top: 50%;
    text-align: center; //if you want center horizontal too

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

Bu FIDDEL 'de metnin uzunluğunu nasıl değiştirdiğini ve hala hizaladığını ve taşdığını görebilirsiniz

http://jsfiddle.net/Yandy_Viera/qnmm1Lm5/1/

0
katma

metin taşması: ellipsis çok satırlı metinlerde çalışmıyor. Bazı çok zayıf tarayıcı desteği olan css-geçici çözümler var . Çalışmasını istiyorsanız, bazı JavaScript özümlerine bakabilirsiniz. .

Her neyse, metninizi ortalamak için, bir konteyner ekleyerek ve bunun için satır yüksekliği: 100px ve görüntüleme: inline-block ve maks. İçerik için 100 piksel :

http://jsfiddle.net/ilpo/jwcyfwpw/

0
katma