CSS - Настройка линий с длинными словами и без места, которое преодолевает ширину контейнера

У меня есть следующий код:

.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>

В кредит слишком длинный текст и без места, он двигается Вашего места (их вытекают контейнера сообщения). Взамен, если текст длинный, но у него есть место, функционируй правильно.

Я не хочу использовать word-break: break-all потому что, если есть нормальный текст с местом, он это "делит". И только я хочу, чтобы он это сделал с длинным словом без места. Поскольку это это следующий пример:

introducir la descripción de la imagen aquí

4
задан 22.01.2017, 19:01
0 ответов

Широкие установленные

Мотив из-за которого word-wrap оно ты не функционирует, - потому что ширина контейнера динамическая.
Если бы он был установленным, оно функционировало бы хорошо.

.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>

Заметь: это свойство было названо в overflow-wrap и, с широкими установленные, он рекомендовал бы использовать:

overflow-wrap: break-word;


Широкие динамические

Это решение основывается в hyphens как главный способ отделять в слогах, когда необходимо отрезать слово, и зависит от словаря, включенного свойством lang этикетки <html>. Однако оно не функционирует в Chrome, а следовательно мы используем word-break: break-word, не стандартное свойство, которое не документировалось, но функционирует в WebKit с широкими динамические:

.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;
}

Функционируй в 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>
4
ответ дан 03.12.2019, 17:35
  • 1
    Я не очень в порядке с hyphens, я должен тогда происходить в широкие " fijos" контролируемые JQuery для того, чтобы они были diná обезьяны в sí. –  22.01.2017, 18:43