以下に示すように通常のフロントエンド開発、多くの場合、表示領域を超えて削減する必要性が要求され、そのようなニュースの見出しとして、文字列を切り捨てる必要があります。
しかし、このアプローチは、そうバックエンドで制御、150個の文字を表示することができますが、携帯電話の画面の最後には、わずか20文字まで表示することができ、このようなPC可視領域として、言葉は正確に傍受を制御することはできません、欠点、特に応答性のページを持っています文字の数は、最善の解決策は、それぞれ以下、フロントエンドの方法で文字列を切り捨てることとJavaScript、CSSの方法を達成することである、非常に悪いのソリューションです。
セクションでのHTML見
以下は、HTMLのこのラインのための操作を切断しました。
1、JavaScriptの方法。
次のコードのように撮影した最初のパッケージの文字列：
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
String.prototype.left = function (len) //左边截取字段数
{ var str = this; if (isNaN(len) || len == null) { len = str.length; }
else { if (parseInt(len) < 0 || parseInt(len) > str.length)
{ len = str.length; } }
return str.substr(0, len);
}
</script>然后再页面中采用jquery方式调用：
<script type="text/javascript">
$(function () { var $title=(".title");
var txt= $title.html().left(50); //截取前50个字符
$title.html(txt); //重新
});
本実施形態に実装することができるが切り詰められているが、この方法は、別のブラウザタイプを定義するために必要に応じて取られ、理想、PCや携帯端末や単語の終わりではありません。
2、CSSの制御は、これが最も推奨されるソリューションであります
クラスのCSSを定義します。
.TITLE {ホワイトスペース：nowrap属性、テキストのオーバーフロー：省略記号;オーバーフロー：隠された;}テキストのオーバーフロー：省略記号、あなたがカットしたい場合は、変更することができます後...というフレーズの意味は、可視領域を越えて三点です。テキストオーバーフロー：クリップ。
今日はまず最初に書き込み、あなたがあなたの助けのために感じれば、あなたが期待でき、誰にでもフロントエンドのスキルを共有するためのフォローアップ時間があります。
レポート/フィードバック