避免在溢出的多行文本中切割线：对于固定宽度/高度容器隐藏

Question

在具有固定宽度和高度并隐藏溢出的容器中，溢出的多行文本可能会在文本行的中间被剪切：

如何避免这种情况？

+ 此外，该元素的宽度和高度是通过 Javascript 设置的，以模仿填充动态内容的 flexbox 元素的宽度和高度。所以在页面加载之前我不知道宽度和高度。

+ 此外，由于元素的高度是动态的，我无法提前决定文本应该占据的行数。所以我不能设置与此相关的行高。

我可以修改行高，也可以修改字体大小。

下面是这个问题的一个活生生的例子：

.container {
  width: 500px;
  height: 200px;
  font-size: 2em;
  overflow: hidden;
  border: 1px solid red;
}

<div class='container'>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32

El trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido debajo para aquellos interesados. Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</div>

Answer 1

您可以调整line-height 属性以限制显示的行数。这可以根据元素的height 计算，使用calc()。只需将元素的height 除以您希望显示的行数即可：

.container {
  width: 500px;
  height: 200px;
  font-size: 3em;
  overflow: hidden;
  border: 1px solid red;
  line-height: calc(200px / 3); /* height divided by desired number of lines */
}

<div class='container'>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad.
  Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió
  la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular
  durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32 El trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido debajo para aquellos interesados. Las
  secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</div>

这使线条之间的垂直间距稍大一些，但可以确保显示每条线而不会以任何方式被切断。