acortar titulos de entrada

[yagami19]

hola

como podria limitar la cantidad de caracteres de un titulo en blogger con CSS
mi blog sale asi, cuando el titulo es muy largo se descuadra u,u




en esta parte modificando algunas cosas solo he logrado ocultar todo el titulo con display: none;
cambiar el tamaño, color etc, pero no logro acortarlo u,u

Código:

 .box h3 {
        position:absolute;
        margin-top:265px;
        margin-left:25px;
        width:170px;
        font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
        font-size:12px;
        text-align: center;
        font-weight:200;
        height:30px;
        color:#757575;
        text-decoration:none
          overflow:hidden;
display: none; 
      }
      .box  h3 a, .box  h3 a:link, .box  h3 a:visited  {color:#1a1919; background-color: transparent; }
      .box  h3 a:hover  {	color: #4F4F4F; background-color: transparent; }
      .sentry {
        margin:0 2px; 
        margin-top:7px;
        margin-left:8px;
        height:260px;
        width: 203px;
        overflow:hidden; 
      }

Este es el codigo completo del estilo

Código:

<style>
      /* post */
      /* Main Content*/
      .box {
        background:url(http://2.bp.blogspot.com/-g1vi4c_8SG0/UcKGD26jtUI/AAAAAAAAD2g/t1nkHai-UqY/s1600/entrada2.png)no-repeat;#FBEDD8;
       width:220px; 
        height:300px;
        overflow: hidden; 
        margin:3px 4px 5px 6px; 
        float:left; 
        display: inline; 
        overflow:hidden;
      }
      .box h3 {
        position:absolute;
        margin-top:265px;
        margin-left:25px;
        width:170px;
        font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
        font-size:12px;
        text-align: center;
        font-weight:200;
        height:30px;
        color:#757575;
        text-decoration:none
          overflow:hidden;
display: none; 
      }
      .box  h3 a, .box  h3 a:link, .box  h3 a:visited  {color:#1a1919; background-color: transparent; }
      .box  h3 a:hover  {	color: #4F4F4F; background-color: transparent; }
      .sentry {
        margin:0 2px; 
        margin-top:7px;
        margin-left:8px;
        height:260px;
        width: 203px;
        overflow:hidden; 
      }
      .sentry a:link, .sentry a:visited {color: #bcc2c4; background-color: transparent; }
      .sentry a:hover {color:#000000; background-color: transparent; text-decoration: none; }
      img.ethumb   {padding:5px 5px; background:#D6D6D6; margin:10px 5px 5px 5px; float:left; }
      .sentry p{margin:0px 0px; padding:0px 0px; font-family:  Tahoma,Georgia, Arial,century gothic,verdana, sans-serif; font-size:13px; }
      .rmore{float:center; color:#9F0505; padding:3px 0px 0px 22px; margin:0px 0px 0px 5px; width:100px; height:10px; font-family:  Tahoma,Georgia, Arial,century gothic,verdana, sans-serif; font-size:11px; font-weight:bold; }
      .rmore a:link, .rmore a:visited { color:#fff; }
      .rmore a:hover{color:#fff; }
      .scomm{float:right; padding:5px 2px 0px 4px; position:relative; font-family:  Tahoma,Georgia, Arial,century gothic,verdana, sans-serif; margin:0px 5px 0px 0px; font-size:0px; width:100px; height:12px; text-align:right; font-weight:bold;}
      .scomm a:link, .scomm a:visited {color:#fff;}
      .scomm a:hover{color:#fff;}
      .sinfo {height:30px; margin:0px 0px; padding: 0px 0px 0px 0px; background-color: transparent; font:12px  Georgia, Arial,century gothic,verdana, sans-serif;}
      .highlight2 {
        margin-top: 15px;
        padding:9px 1px;
        border:1px solid #D7D6D6;
        overflow:hidden;
        background:#E9E9E9;
        -moz-border-radius-bottomright: 5px;
        -khtml-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -khtml-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topright: 5px;
        -khtml-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -khtml-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
      }
    </style>

Agradesco la ayuda

saludos

[pzin]

Podrías poner algo así:

Código CSS:

h1.titular {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 

No he mirado bien tu código, así que tendrás que adecuar el selector a tu código.

Básicamente lo que haces con esto, es que el texto que sobresalga se oculte, que sólo se muestre en un linea y que en caso de exceder, aparte de ocultarse, te muestre tres puntos suspensivos.

[yagami19]

Iniciado por pzin

Podrías poner algo así:

Código CSS:

h1.titular {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 

No he mirado bien tu código, así que tendrás que adecuar el selector a tu código.

Básicamente lo que haces con esto, es que el texto que sobresalga se oculte, que sólo se muestre en un linea y que en caso de exceder, aparte de ocultarse, te muestre tres puntos suspensivos.

Muchas Gracias me funciono