我正在为学校做响应式网站，我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符)，当我有一个非常大的屏幕时，句子不会超过75个字符。
我已经尝试了最大宽度，但这打乱了我的布局。我使用flexbox和媒体查询，使其响应。
当前回答
尝试在设置为max-width后截断字符。在这种情况下我使用了75ch
p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：75通道; } <p>Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。</p>
如需多行截断，请按此链接。
示例:https://codepen.io/srekoble/pen/EgmyxV
我们将为此使用webkit css。总之，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。这可能是特定于浏览器的，因为每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。
其他回答
示例代码:
.limited-text { 空白:nowrap;} 宽度:400 px; 溢出:隐藏; 文本溢出:省略; ｝ <p class="limited-text">我爱你，我爱你。时间和欲望是错误的，是腐败的，是幸福的!</p> .</p
这在CSS中是不可能的，你必须使用Javascript。虽然你可以设置p的宽度为30个字符，下一个字母会自动下来，但这不会那么准确，如果字符是大写的，会有所不同。
尝试在设置为max-width后截断字符。在这种情况下我使用了75ch
p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：75通道; } <p>Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。</p>
如需多行截断，请按此链接。
示例:https://codepen.io/srekoble/pen/EgmyxV
我们将为此使用webkit css。总之，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。这可能是特定于浏览器的，因为每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。
这篇文章是关于一个CSS解决方案的，但这篇文章已经很老了，所以为了防止其他人偶然发现这一点，并且正在使用一个现代的JS框架，比如Angular 4+，有一个简单的方法可以通过Angular Pipes来实现这一点，而不必在CSS上瞎忙活。
可能也有“React”或“Vue”的方法来做到这一点。这只是为了展示如何在框架中完成它。
truncate-text.pipe.ts
/**
* Helper to truncate text using JS in view only.
*
* This is pretty difficult to do reliably with CSS, especially when there are
* multiple lines.
*
* Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
*
* If maxLength is not provided, the value will be returned without any truncating. If the
* text is shorter than the maxLength, the text will be returned untouched. If the text is greater
* than the maxLength, the text will be returned with 3 characters less than the max length plus
* some ellipsis at the end to indicate truncation.
*
* For example: some really long text I won't bother writing it all ha...
*/
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
transform(value: string, ...args: any[]): any {
const maxLength = args[0]
const maxLengthNotProvided = !maxLength
const isShorterThanMaximumLength = value.length < maxLength
if (maxLengthNotProvided || isShorterThanMaximumLength) {
return value
}
const shortenedString = value.substr(0, maxLength - 3)
return `${shortenedString}...`
}
}
app.component.html
<h1>{{ application.name | truncateText:45 }}</h1>
纯CSS解决方案截断多行字符
我有一个类似的问题，并从Hackingui.com找到了这个优秀的css解决方案。您可以阅读文章获取信息，但下面是主要代码。
我测试过了，效果很好。希望有人在选择JS或服务器端选项之前发现它有用
/* styles for '...' */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
