tengo una duda de posicionamientos

[edie8]

Buenas tardes.
Tengo un problema quiero hacer que en mi web salga la foto y justo al lado salga el nombre, y que si este es muy largo se baje el segundo apellido o algo asi pero nose como se hace tal cosa, es decir, si alguien se acuerda de la antigua pagina de tuenti en el inicio salia la foto y el nombre completo, si este era muy largo se cortaba con el guioncito de este tipo salia:
FOTO Alvaro palazon me-
lon
y es lo que kiero hacer, pero para empezar mi primer problema es que sale la foto y en la esquina de abajo el nombre si quiero cortar este sale debajo ya de la foto, nose como hacer este tipo de diseño, ya que recien empece con css. un saludo. gracias de antemanno.

[sergi_multimedia]

Para que las palabras se "corten" tienes que añadir una propiedad en el css de la etiqueta que quieres aplicarla.

Por ejemplo:

Código CSS:

p.test {word-wrap:break-word;}
 

[pzin]

Y para que se añada el guión, haces:

Código CSS:

p.test {
  word-break: hyphenate;
}
 

[edie8]

El de sergi_multimedia si me funciona me corta el texto adaptandolo pero el del guion no me pone el guion nose porque, otra consulta tengo este codigo:

Código PHP:

echo '<br /><br /><div id="inicio">';
    echo '<img src="'.$perfil_img['imagen'].'" style="width:30%;">';
    echo '<div id="contenedor_foto">';
    echo '<span id="nombre_user">'.$perfil_img['usuarios'].' '.$perfil_img['apellidos'].'</span>';
    echo '</div></div>';
 

y me gustaría que el nombre saliera al lado de la foto como puedo hacer tal cosa es posible hacerlo??
y lo del guion lo puse asi y no me funciona:

Código CSS:

#nombre_user
{
margin-top:-50%;
width:4%;
/*word-wrap:break-word;*/
word-break: hyphenate;}
 

gracias por la ayuda un saludo.