我正在为学校做响应式网站,我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。
我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。
我正在为学校做响应式网站,我的问题是:
我如何在我的网站上设置句子的最大字符长度(用CSS)(比如75个字符),当我有一个非常大的屏幕时,句子不会超过75个字符。
我已经尝试了最大宽度,但这打乱了我的布局。我使用flexbox和媒体查询,使其响应。
当前回答
75个字符
我已经尝试了最大宽度,但这打乱了我的布局。
使用max-width: 75ch,然后创建一个布局,当你超过这个宽度时不会乱。
其他回答
这篇文章是关于一个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;
}
你可以看看你的字体有多宽,然后取平均字符像素大小。然后再乘以你想要的字符数。这有点俗气,但它是一种快速的解决方法。
您总是可以通过设置max-width和溢出省略号来使用截断方法
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
一个例子:
.wrapper { padding: 20px; background: #eaeaea; max-width: 400px; margin: 50px auto; } .demo-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .demo-2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 150px; } <div class="wrapper"> <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p> </div> <div class="wrapper"> <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p> </div>
对于多行截断,请查看flex解决方案。 一个截断3行的示例。
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
一个例子:
p { 空白:无换行; 溢出:隐藏; 文本溢出:省略号; 最大宽度:200px; } <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Deserunt rem odit quis quaerat.In dolorem praesentium velit ea esse consequuntur fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>