CSSについて

Question

以下のサイトで載せてるカテゴリーページのCSSですが、このまま使うと段差が生じてしまいます為、面一で並ばせたいのですが、出来ますか？
Yahoo!ショッピングの表示形式が理想です。
（列は3列のままで使いたいです）
商品の囲みを消し、商品名の文字数制限をもっと短く、もしくは商品名を削除したいです。

https://www.cyber-records.co.jp/blog/rakuten/rakuten-attract-customers/rms_sp_technique_02/#i-6


#sCSLContainer  {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 3px 15px 4px;
}
#sCSLContainer > a {
	box-sizing: border-box;
	display: inline-table;
	width: 33.333333%; /* 2段組の場合は50% */
	width : calc(100% / 3) ; /* 2段組の場合は削除 */
	overflow: hidden;
	padding: 0 2px 1px;
}
#sCSLContainer > a > div {
	box-sizing: border-box;
	display: inline-block !important;
	width: 100%;
	height: auto !important;
	background: none #ffffff;
	border: solid 1px #d2d2d2;
	padding: 6px 4px;
	margin: 0;
	overflow: hidden;
}
/* 商品画像部分 */
#sCSLContainer .inLeft {
	width: 100%;
	margin-bottom: 10px;
}
#sCSLContainer .inLeft img {
	box-sizing: border-box;
	width: 100%;
	border: solid 1px #ececec;
}
/* 商品名・価格部分 */
#sCSLContainer inRight .txtheight {
	height: 45px;
	min-height:auto;
	margin-bottom: 5px;
	padding: 0;
}
#sCSLContainer .inRight .ctgItemNormal{
	background: none;
	position: relative;
	height: 100%;
	padding: 0;
	font-size: 13px;
	line-height: 15px;
	letter-spacing: -0.5px;
	word-wrap: break-word;
	overflow: hidden;
}
#sCSLContainer .inRight .ctgItemNormal:before,
#sCSLContainer .inRight .ctgItemNormal:after {
	position: absolute;
	background-color: #ffffff;
}
#sCSLContainer .inRight .ctgItemNormal:before {
	content: "...";
	bottom: 0;
	right: 0;
}
#sCSLContainer .inRight .ctgItemNormal:after {
	content: "";
	width: 100%;
	height: 100%;
}
#sCSLContainer .inRight .txtprice {
	padding: 0;
	color: #bf0000;
	text-align: left;
}
#sCSLContainer .inRight .txtprice span:last-child {
	display: block;
	color: #333333;
}

Answer

ECマスターズの田中です。

同じCSSを導入された、
https://forum.ec-masters.net/post_view.php?id=5398
と同じような症状で間違いないでしょうか。

上記質問への回答にもあるように、
「#sCSLContainer .inRight .ctgItemNormal」への規則に含まれる、
word-wrap: break-word; を word-break: break-all; に、
height: 100%; を height: 90px; に、
それぞれご変更いただけますでしょうか。

なお、商品名を削除（非表示に）される際は、
「#sCSLContainer .txtheight」「#sCSLContainer .inRight .ctgItemNormal」
以上２つの規則に、 display: none; をご設定ください。

Answer

回答ありがとうございます。

商品名を消すことは出来ましたが、商品名スペースが空白のまま残るだけなのでスペースを詰めることは出来ないでしょうか？（サムネイルと販売価格だけが詰まってほぼ正方形に並ぶようなイメージ）

あと、各商品を囲んでいる外枠は消せませんか？

Answer

ECマスターズの田中です。

＞商品名を消すことは出来ましたが、商品名スペースが空白のまま残るだけなのでスペースを詰めることは出来ないでしょうか？

私にて、改めて確認したところ、
#sCSLContainer .txtheight { display: none; }
上記規則を記載していただければスペースが詰まりましたので、
一度、ご記載をお試しいただけますでしょうか。

＞あと、各商品を囲んでいる外枠は消せませんか？

外枠は消すことが出来ます。
#sCSLContainer > a > div
への規則に含まれるborderプロパティの値に
none
をご指定ください。