What is a promise in Javascript?

Question

Máxima Alekz

Asked: 2020-01-22 15:03:20 +0800 CST 2020-01-22 15:03:20 +0800 CST 2020-01-22 15:03:20 +0800 CST

CSS - 用长单词换行，没有超过容器宽度的空格

772

我有以下代码：

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

当文本太长且没有空格时，将其从其位置移开（消息容器为 left ）。另一方面，如果文本很长但有空格，则它可以正常工作。

我不想使用word-break: break-all，因为如果有带有空格的普通文本，它会“拆分”它。我只希望它用没有空格的长词来做到这一点。如下例所示：

1 Answers

Voted

Mariano · Answer 1 · 2020-01-23T02:39:44+08:00

固定宽度

它对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;

动态宽度

此解决方案依赖于连字符作为在需要对单词进行连字符时进行连字符的主要方式，并且取决于langtag属性包含的字典<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。}

示范：

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

CSS - 用长单词换行，没有超过容器宽度的空格

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?