我正在为学校做响应式网站，我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符)，当我有一个非常大的屏幕时，句子不会超过75个字符。
我已经尝试了最大宽度，但这打乱了我的布局。我使用flexbox和媒体查询，使其响应。
当前回答
HTML
<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>
jQuery
var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
$(p).text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
CSS
#dash {
width: 400px;
height: 60px;
overflow: hidden;
}
#dash p {
padding: 10px;
margin: 0;
}
结果
Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi Ligula， dapibus a volutpat sit amet， mattis et...
杰斯菲德尔
其他回答
HTML
<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>
jQuery
var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
$(p).text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
CSS
#dash {
width: 400px;
height: 60px;
overflow: hidden;
}
#dash p {
padding: 10px;
margin: 0;
}
结果
Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi Ligula， dapibus a volutpat sit amet， mattis et...
杰斯菲德尔
有一个CSS的长度值ch。
从MDN
这个单位代表宽度，或者更准确地说，是提前测量， 符号“0”(0,Unicode字符U+0030)在元素的 字体。
这大概就是你想要的。
p { overflow: hidden; max-width: 75ch; } <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>
现代CSS网格答案
在CodePen上查看完整的工作代码。给定以下HTML:
<div class="container">
<p>Several paragraphs of text...</p>
</div>
您可以使用CSS Grid创建三个列，并告诉容器将包含段落的中间列的最大宽度设置为70个字符。
.container
{
display: grid;
grid-template-columns: 1fr, 70ch 1fr;
}
p {
grid-column: 2 / 3;
}
这是它的样子(Checkout CodePen是一个完整的工作示例):
下面是另一个示例，您可以使用minmax来设置一个值范围。在小屏幕上，宽度将设置为50个字符宽，在大屏幕上，宽度将设置为70个字符宽。
.container
{
display: grid;
grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}
p {
grid-column: 2 / 3;
}
尝试在设置为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>
