在css中设置最大字符长度 [英] Setting a max character length in css

问题描述

我为学校制作回应式网站，我的问题是：

I am making responsive website for school and my question is:

如何在我的网站上设定句子的最大字元长度（含css） 75个字符），当我有一个非常大的屏幕，句子不会超过75个字符。

How do i set a max character length of the sentences(with css) on my website(like 75 characters) that when i have a very large screen,the sentences wont go further than 75 characters.

我尝试了最大宽度，但混乱了我的布局。我使用flexbox和媒体查询使其响应。

I have tried a max width but that messes up my layout. I am using flexbox and mediaqueries to make it responsive.

推荐答案

您可以随时使用truncate方法，方法是设置 max-width 和溢出省略号像这样

You could always use a truncate method by setting a max-width and overflow ellipsis like this

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

例如： http://jsfiddle.net/3czeyznf/

对于多行截断，请查看 flex 解决方案。
在3行上截断的示例。

For a multi line truncation have a look at a flex solution. An example with truncation on 3 rows.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

例如： https://codepen.io/srekoble/pen/EgmyxV

这篇关于在css中设置最大字符长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！