Şu anda bazı iPhone (Safari/WebKit) web uygulaması geliştirmelerine katılıyorum ve ayarlanmış yükseklikteki öğelere sahip olmak istiyorum başlık metni ve gövde metni ile her zaman 3 satır gösteriliyor. Başlık metni kısasa, 2 satır gövde metni gösterilmelidir. Başlık metni çok uzunsa, en fazla 2 satır almalı ve gövde metni için 1 satır bırakmalıdır. Metin kesildiğinde, son karakter olarak bir elips göstermelidir.CSS metin taşması kullanarak ayarlanan yüksekliğin bir öğesindeki metin satırlarının sayısını değiştirmek için
İhtiyacım olan her şeyi yapan, ancak üç nokta görüntülenmediği için aşağıdakileri buldum. Son gereksinimi karşılamak için bu çözümü elde etmenin bir yolu var mı?
Code below, as rendered by Safari http://segdeha.com/assets/imgs/stack-ellipsis.png
bu soruna
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
width: 100px;
}
p {
/* white-space: nowrap; */
font-family: Helvetica;
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
max-height: 48px;
overflow: hidden;
border: solid 1px red;
}
strong {
/* white-space: nowrap; */
font-size: 16px;
display: block;
text-overflow: ellipsis;
max-height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>
<strong>Short title</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
<p>
<strong>Long title that will span more
than 2 lines when we're done.</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
</div>
</body>
</html>
Safari'de http://iphone.facebook.com adresine baktım (iPhone kullanıcı aracısının parolasını) ve bu sunucu tarafına benziyor gibi görünüyor. Aynı kadere mahkum olduğumu sanmıyorum. –
Geçmişte benzer bir şey yapmak istedim. Çizgileri bölme ve elips sunucu tarafını eklemeyi denedim. Bu, metnin ne kadar geniş ve uzun olacağını (piksel olarak) bilmemi gerektirdi. Sonunda hayal kırıklığına uğradım. –
JavaScript dışı mı? – peteorpeter