5

Tengo el siguiente código:

.mensajes{
	width: 100%;
	text-align: right;
	border: 2px solid lightgray;
	font-size: 16px!important;
}
.block{
	display: block;
}
.margin-x-20{
	margin-top: 20px;
	margin-bottom: 20px;
}
.mensajes .sideR{
   display: table-cell;
}
.contenedor{
	min-width: 30%!important;
}

.mensajes .sideR .contenedor{
	float: right;
	text-align: right;
	border-radius: 7px;
	border: 2px solid #337ab7;
	max-width: 70%;
	padding: 4px 10px;
	margin-right: 25px; 
	position: relative;
}
.mensajes .sideR .contenedor .boton{
	width: 0;
	height: 0;
	border-left: 10px solid #337ab7;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	right: -10px;
	bottom: 5px;
}
.mensajes .sideD{
   display: table-cell;
}
.mensajes .sideD .contenedor{
	float: left;
	text-align: left;
	border-radius: 7px;
	border: 2px solid #337ab7;
	max-width: 70%;
	padding: 4px 10px;
	margin-left: 25px; 
	position: relative;
}
.mensajes .sideD .contenedor .boton{
	width: 0;
	height: 0;
	border-right: 10px solid #337ab7;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	left: -10px;
	bottom: 5px;
}

.contenedor .insider{
	position: relative;
}

.contenedor .text{
	word-wrap: break-word;
	white-space:normal;
  /*word-break:break-all;*/
}

.contenedor .pie{
	width: 100%;
	border-top: 1px solid #337ab7;
	font-size: 13px!important;
}
<div class="mensajes">
		<div class="block margin-x-20">
			<div class="sideR">
				<div class="contenedor">
					<div class="boton"></div>
					<div class="insider">
						<div class="seen"></div>
						<div class="text">	asdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasd klfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsf sdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsd asdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfs fsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsd
						</div>
					</div>
					<div class="pie block text-center">
						21/01/2017 02:22am
					</div>
				</div>
			</div>
		</div>
		<div class="block margin-x-20">
			<div class="sideD">
				<div class="contenedor">
					<div class="boton"></div>
					<div class="text">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laboru
					</div>
					<div class="pie block text-center">
						21/01/2017 02:22am
					</div>
				</div>
			</div>
		</div>
	</div>

Al haber un texto demasiado largo y sin espacios, se mueve de su lugar (se sale del contenedor mensajes). En cambio si el texto es largo pero tiene espacios, funciona correctamente.

No quiero usar word-break: break-all porque si hay texto normal con espacios, lo "parte". Y sólo quiero que haga eso con la palabra larga sin espacios. Como lo es el siguiente ejemplo:

introducir la descripción de la imagen aquí

0

1 respuesta 1

5

Anchos fijos

El motivo por el cual word-wrap no te funciona es porque el ancho del contenedor es dinámico.
Si fuese fijo, funcionaría bien.

.text {
    border: 1px solid orangered;
    
    width: 300px;
    word-wrap: break-word;
}
<div class="text">
Línea con una palabra extremadamenteLargaYLuego una línea muy larga sin espacios:	asdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsffsfsdasdklfsfs
</div>

Nota: esta propiedad fue renombrada a overflow-wrap y, con anchos fijos, recomendaría usar:

overflow-wrap: break-word;


Anchos dinámicos

Esta solución se basa en hyphens como la principal forma de separar en sílabas cuando es necesario cortar una palabra, y depende del diccionario incluido por la propiedad lang de la etiqueta <html>. Sin embargo no funciona en Chrome, por lo que usamos word-break: break-word, una propiedad no estándar, que no está documentada, pero funciona en WebKit con anchos dinámicos:

.text {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;     /* Sólo WebKit -NO DOCUMENTADO */

    -ms-hyphens: auto;          /* Guiones para separar en sílabas */
    -moz-hyphens: auto;         /*  depende de lang en <html>      */
    -webkit-hyphens: auto;
    hyphens: auto;
}

Funciona en Chrome 13, FF 6, Safari 5.1, iOS 4.2, IE 8.


Demo:

.mensajes {
  width: 100%;
  text-align: right;
  border: 2px solid lightgray;
  font-size: 16px!important;
}
.block {
  display: block;
}
.margin-x-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mensajes .sideR {
  display: table-cell;
}
.contenedor {
  min-width: 30%!important;
}
.mensajes .sideR .contenedor {
  float: right;
  text-align: right;
  border-radius: 7px;
  border: 2px solid #337ab7;
  max-width: 70%;
  padding: 4px 10px;
  margin-right: 25px;
  position: relative;
}
.mensajes .sideR .contenedor .boton {
  width: 0;
  height: 0;
  border-left: 10px solid #337ab7;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  right: -10px;
  bottom: 5px;
}
.mensajes .sideD {
  display: table-cell;
}
.mensajes .sideD .contenedor {
  float: left;
  text-align: left;
  border-radius: 7px;
  border: 2px solid #337ab7;
  max-width: 70%;
  padding: 4px 10px;
  margin-left: 25px;
  position: relative;
}
.mensajes .sideD .contenedor .boton {
  width: 0;
  height: 0;
  border-right: 10px solid #337ab7;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: -10px;
  bottom: 5px;
}
.contenedor .insider {
  position: relative;
}
.contenedor .text {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  /* Sólo WebKit -NO DOCUMENTADO */
  -ms-hyphens: auto;
  /* Guiones para separar en sílabas */
  -moz-hyphens: auto;
  /*  depende de lang en <html>      */
  -webkit-hyphens: auto;
  hyphens: auto;
}
.contenedor .pie {
  width: 100%;
  border-top: 1px solid #337ab7;
  font-size: 13px!important;
}
<html lang="es">
<div class="mensajes">
  <div class="block margin-x-20">
    <div class="sideR">
      <div class="contenedor">
        <div class="boton"></div>
        <div class="insider">
          <div class="seen"></div>
          <div class="text">
            Línea normal con una palabra que puede ser extremadamenteLargaQueSe ajusta bien. Además, con palabras más largas que la línea, pasa esto: asdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdalfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfs
            asdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdalfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfsfsdasdklfs
          </div>
        </div>
        <div class="pie block text-center">
          21/01/2017 02:22am
        </div>
      </div>
    </div>
  </div>
  <div class="block margin-x-20">
    <div class="sideD">
      <div class="contenedor">
        <div class="boton"></div>
        <div class="text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru
        </div>
        <div class="pie block text-center">
          21/01/2017 02:22am
        </div>
      </div>
    </div>
  </div>
</div>
</html>

1
  • No me va muy bien con hyphens, debo entonces pasar a anchos "fijos" controlados por JQuery para que sean dinámicos en sí. Commented el 22 ene. 2017 a las 16:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.